CSS Backgrounds

Styling Backgrounds

CSS background properties are used to define background effects for elements.

You can set background color, image, position, size, and more.

/* Background Color */
div {
  background-color: lightblue;
}

/* Background Image */
body {
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Background Shorthand */
div {
  background: #f0f0f0 url('img.png') no-repeat center/cover;
}
  • background-color - Background color
  • background-image - Background image
  • background-repeat - Repeat pattern
  • background-position - Image position
  • background-size - Image size (cover, contain)
  • background - Shorthand property

Try Backgrounds

<div class="box1">Colored Background</div>
<div class="box2">Gradient Background</div>

Note: Use background-size: cover to make background image cover entire element.