Background Image

The background-image property sets an image as the background of an element. You can use URL paths to images or data URIs.

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

Background Position

The background-position property sets the starting position of a background image. You can use keywords (e.g., top, right, center, etc.) or length values (e.g., 50px, 10%).

div {
background-position: center;
}

Background Size

The background-size property specifies the size of the background images. The values can be set as length, percentages, cover, or contain.

div {
background-size: cover;
}

Background Repeat

The background-repeat property sets how background images are repeated. You can set it to repeat, repeat-x, repeat-y, or no-repeat.

div {
background-repeat: no-repeat;
}

Background Attachment

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page. The values can be scroll or fixed.

div {
background-attachment: fixed;
}

Background Shorthand

The background shorthand property allows you to set multiple background properties in a single declaration. The order of the values is background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment.

div {
background: lightblue url('background.jpg') no-repeat center/cover fixed;
}

Multiple Backgrounds

You can set multiple background images for an element using a comma-separated list. Each background layer is defined by the individual background properties.

div {
background: url('first.jpg') left top no-repeat, url('second.jpg') right bottom no-repeat;
}

Background Origin

The background-origin property specifies the origin position of a background image. The values can be content-box, padding-box, or border-box.

div {
background-origin: padding-box;
}

Background Clip

The background-clip property specifies the painting area of the background. The values can be border-box, padding-box, or content-box.

div {
background-clip: border-box;
}

Background Gradient

CSS gradients let you display smooth transitions between two or more specified colors. You can use linear-gradient(), radial-gradient(), or conic-gradient() functions to create gradients.

div {
background: linear-gradient(to right, red, yellow);
}

Background Blend Mode

The background-blend-mode property defines how background images should blend with each other and with the background color. The values can be normal, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, luminosity, etc.

div {
background: url('background.jpg'), linear-gradient(to right, red, yellow);
background-blend-mode: overlay;
}

CSS Background Examples

some comprehensive examples demonstrating different background properties:

• Example 1: Setting a background color and image.
  Copy to clipboard

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

• Example 2: Using multiple background images.
  Copy to clipboard

  
  div {
  background: url('first.jpg') left top no-repeat, url('second.jpg') right bottom no-repeat;
  }
  
  

• Example 3: Creating a gradient background.
  Copy to clipboard

  
  div {
  background: linear-gradient(to right, red, yellow);
  }
  
  

• Example 4: Blending a background image with a gradient.
  Copy to clipboard

  
  div {
  background: url('background.jpg'), linear-gradient(to right, red, yellow);
  background-blend-mode: overlay;
  }
  
  

By mastering the CSS background properties, you can create visually appealing and versatile designs for your web projects. Experiment with different combinations and values to achieve the desired effect for your background elements.