CSS Backgrounds

CSS background properties let you control the background of elements. You can set a color, image, repeat, position, size, and attachment.

1) Background Color


body {
  background-color: lightblue;
}

Sets a solid background color for the page.

2) Background Image


div {
  background-image: url('sample.jpg');
}

Adds an image as the background of a <div>.

3) Background Repeat


div {
  background-image: url('pattern.png');
  background-repeat: no-repeat;
}

By default, background images repeat both horizontally and vertically. Use no-repeat to prevent this.

4) Background Position


div {
  background-image: url('logo.png');
  background-repeat: no-repeat;
  background-position: right top;
}

Controls where the background image is placed (e.g., top, center, bottom, left, right, or pixel/percentage values).

5) Background Size


div {
  background-image: url('banner.jpg');
  background-size: cover;
}

cover scales the image to cover the element. contain scales to fit inside the element.

6) Background Attachment


body {
  background-image: url('bg.jpg');
  background-attachment: fixed;
}

Defines whether the background scrolls with the page (scroll) or stays fixed (fixed).

7) Background Shorthand


div {
  background: lightblue url('flower.png') no-repeat right top;
}

You can combine all background properties into one shorthand declaration.

Quick Notes:

  • background-color → solid colors
  • background-image → use url() for images
  • background-repeat → repeat, repeat-x, repeat-y, no-repeat
  • background-position → top/center/bottom, left/right, or coordinates
  • background-size → auto, cover, contain, or custom px/%
  • background-attachment → scroll, fixed, local
  • background shorthand combines everything