Skip to content
Laviyx Learn

Try

CSS course menu

CSS Backgrounds: background-color, background-image, size, position and repeat

Learn CSS backgrounds: background-color, background-image, background-size cover and contain, background-position, background-repeat, background-attachment, multiple backgrounds, the background shorthand, and text readability over images.

Beginner6 min readUpdated
On this page

Every element can have a background: a colour, one or more images, or gradients. Backgrounds fill the content and padding area (and sit under the border).

background-color#

CSS
.card { background-color: #f6f7f9; }

background-image#

CSS
.hero {
  height: 160px;
  background-image: url("/lesson-assets/landscape-600.svg");
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
}
.hero h2 {
  margin: 0;
  padding: 6px 14px;
  background: rgb(0 0 0 / 0.6);
  color: white;
  border-radius: 6px;
}
HTML
<div class="hero"><h2>Explore the hills</h2></div>
Result

The path in url() is relative to the CSS file, not the HTML page. Background images are decorative: screen readers do not announce them, so any image that carries meaning should be an <img> with alt text instead.

background-size#

CSS
.b {
  display: inline-block;
  width: 170px;
  height: 110px;
  margin: 4px;
  border: 1px solid #999;
  background: #eee url("/lesson-assets/landscape-600.svg") no-repeat center;
  vertical-align: top;
  font: 12px monospace;
}
HTML
<div class="b" style="background-size: cover">cover</div>
<div class="b" style="background-size: contain">contain</div>
<div class="b" style="background-size: 80px auto">80px auto</div>
Result
ValueEffect
coverFill the whole box; parts of the image may be cropped
containShow the whole image; there may be empty space
80px auto, 50%An explicit width (and height)

background-repeat#

By default, a background image repeats to fill the box, which is useful for patterns:

CSS
.pattern { background-image: url("dots.png"); background-repeat: repeat; }
.once    { background-repeat: no-repeat; }
.row     { background-repeat: repeat-x; }   /* horizontally only */

background-position#

Sets where the image sits, using keywords (top, center, right bottom), lengths or percentages:

CSS
.logo-corner {
  background: url("logo.svg") no-repeat right 16px bottom 16px;
}

With cover, background-position chooses which part of the image stays visible when it is cropped. center is a good default.

Multiple backgrounds#

Separate layers with commas. The first layer is drawn on top:

CSS
.banner {
  height: 150px;
  background:
    linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)),
    url("/lesson-assets/landscape-600.svg") center / cover;
  color: white;
  padding: 16px;
  font: bold 22px system-ui, sans-serif;
}
HTML
<div class="banner">Readable text over a darkened image</div>
Result

A semi-transparent gradient layer over a photo is the standard way to keep text readable. You will learn gradients in the next lesson.

The background shorthand#

CSS
background: #eee url("pattern.png") repeat-x top left / 20px auto;
/*          colour  image           repeat  position / size */

The size must come right after the position, separated by /. The colour can only be set in the last layer.

background-attachment#

background-attachment: fixed keeps the image fixed to the viewport while the content scrolls over it (a "parallax" look). It is not supported in the same way on many mobile browsers, and it can make scrolling slower, so use it sparingly.

Practice#

Practice exercise

Create a 200px tall banner using /lesson-assets/landscape-1200.svg that covers the whole box, is centered, and has a semi-transparent dark layer on top so that white centered text is readable.

Show solution
CSS
.banner {
  height: 200px;
  display: grid;
  place-items: center;
  color: white;
  font: 600 24px system-ui, sans-serif;
  background:
    linear-gradient(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.45)),
    url("/lesson-assets/landscape-1200.svg") center / cover no-repeat;
}
HTML
<div class="banner">Weekend trek: 12 seats left</div>
Result

Key takeaway#

Finished this lesson?

Related lessons

CSSCSS Gradients: linear-gradient, radial-gradient and conic-gradientCreate CSS gradients without images: linear-gradient with angles and colour stops, hard stops for stripes, radial-gradient, conic-gradient for pie charts, repeating gradients, and gradient text.Beginner4 min readCSSCSS Colors: Names, Hex, RGB, HSL, OKLCH, Transparency and ContrastLearn every way to write colours in CSS: named colours, hex codes, rgb(), hsl(), oklch(), transparency with alpha and opacity, currentColor, and how to choose accessible colour contrast.Beginner5 min readCSSCSS Shadows, Opacity and Filters: box-shadow, text-shadow, filter and backdrop-filterAdd depth and visual effects with CSS: box-shadow (offsets, blur, spread, inset, layered shadows), text-shadow, opacity, filter functions such as blur, grayscale and brightness, drop-shadow, and frosted glass with backdrop-filter.Intermediate5 min read