html
/

CSS Background

Last Sync: Today

On this page

13
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

CSS Background

What is CSS Background?

CSS background properties are used to define the background effects of elements, such as color, images, and positioning.

Background Color

CSSRead-only
1
div {
  background-color: lightblue;
}

Background Image

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

Background Repeat

CSSRead-only
1
div {
  background-repeat: no-repeat;
}

Background Position

CSSRead-only
1
div {
  background-position: center;
}

Background Size

CSSRead-only
1
div {
  background-size: cover;
}

Background Attachment

CSSRead-only
1
div {
  background-attachment: fixed;
}

Multiple Backgrounds

CSSRead-only
1
div {
  background-image: url('img1.jpg'), url('img2.jpg');
}

Shorthand Property

CSSRead-only
1
div {
  background: #000 url('image.jpg') no-repeat center/cover;
}

Background Properties Overview

PropertyDescription
background-colorSets background color
background-imageSets background image
background-repeatControls image repetition
background-positionSets image position
background-sizeDefines image size
background-attachmentScroll behavior

Best Practices

  • Use background shorthand for cleaner code
  • Optimize images for performance
  • Use cover for responsive backgrounds
  • Ensure good contrast with text

Common Mistakes

  • Using large images without optimization
  • Incorrect path in background-image
  • Forgetting no-repeat causing tiling
  • Poor contrast affecting readability

Conclusion

CSS background properties allow flexible and powerful styling. Proper usage enhances visual design and performance.

Try it yourself

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

Test Your Knowledge

Q1
of 3

Which property sets image?

A
background-color
B
background-image
C
background-size
D
background-repeat
Q2
of 3

Which prevents repetition?

A
repeat
B
no-repeat
C
cover
D
fixed
Q3
of 3

Which property sets size?

A
background-position
B
background-size
C
background-repeat
D
background-color

Frequently Asked Questions

What is background shorthand?

It combines multiple background properties in one line.

What does cover do?

It scales image to cover entire element.

Can I use multiple backgrounds?

Yes, using comma-separated values.

Previous

css units

Next

css borders

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.