Home Tutorials Videos Q&A MCQ Shortcuts Exercises Appointment Login

CSS Backgrounds

CSS Backgrounds are used to decorate HTML elements by adding colors, images, gradients, and other visual effects. Background properties make web pages attractive and professional.

1. Introduction to CSS Backgrounds

CSS provides several properties to control the background of HTML elements.

Main Background Properties
  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-size
  • background-attachment

body{

    background-color:#f5f5f5;

}
CSS backgrounds improve the appearance and user experience of websites.

2. Background Color

The background-color property changes the background color of an element. 


body{

    background-color:lightblue;

}

div{

    background-color:#f8f9fa;

}
Property Purpose
background-color Sets the background color.
Background colors can be specified using color names, HEX, RGB, RGBA, HSL, or HSLA values.

3. Background Image

The background-image property places an image behind an HTML element. 


body{

    background-image:url("images/bg.jpg");

}
Example

div{

    background-image:url("flower.jpg");

    height:300px;

}
If the image is smaller than the element, it repeats automatically unless specified otherwise.

4. Background Repeat

The background-repeat property controls whether a background image repeats. 


body{

    background-image:url("pattern.png");

    background-repeat:no-repeat;

}
Value Description
repeat Repeats horizontally and vertically.
repeat-x Repeats horizontally only.
repeat-y Repeats vertically only.
no-repeat Displays the image only once.
Use no-repeat for banners, logos, and hero images.

5. Background Position

The background-position property specifies the starting position of a background image. 


body{

    background-image:url("logo.png");

    background-repeat:no-repeat;

    background-position:center;

}
Value Result
left top Top-left corner
center Center of the element
right bottom Bottom-right corner
50% 50% Center using percentage values
Proper background positioning ensures images appear exactly where you want them.

6. Background Size

The background-size property specifies the size of the background image. 


body{

    background-image:url("nature.jpg");

    background-size:cover;

}
Value Description
auto Default image size.
cover Covers the entire element.
contain Fits the entire image inside the element.
100% 100% Stretches image to fill the element.
cover is commonly used for hero sections and banners.

7. Background Attachment

The background-attachment property determines whether the background image scrolls with the page or remains fixed. 


body{

    background-image:url("mountain.jpg");

    background-attachment:fixed;

}
Value Description
scroll Background scrolls with the page.
fixed Background stays fixed.
local Background scrolls with the element's content.
Fixed backgrounds are commonly used to create a parallax scrolling effect.

8. Background Origin

The background-origin property specifies where the background image begins. 


.box{

    border:10px solid black;

    padding:20px;

    background-image:url("flower.jpg");

    background-origin:padding-box;

}
Value Starts From
padding-box Padding area
border-box Border area
content-box Content area
Background origin only affects background images, not background colors.

9. Background Clip

The background-clip property specifies how far the background extends inside an element. 


.box{

    border:8px solid blue;

    padding:20px;

    background:lightyellow;

    background-clip:content-box;

}
Value Description
border-box Background extends under the border.
padding-box Background extends to the padding edge.
content-box Background is limited to the content area.
Background clipping helps create advanced layout and design effects.

10. Background Shorthand Property

The background shorthand property combines several background properties into a single declaration. 


body{

    background:#f5f5f5
               url("bg.jpg")
               no-repeat
               center
               fixed;

}
Properties Included
  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-attachment
Using the shorthand property makes your CSS cleaner and easier to maintain.

11. Multiple Background Images

CSS allows you to apply more than one background image to a single HTML element. The images are separated by commas. 


.banner{

    background-image:
        url("logo.png"),
        url("background.jpg");

    background-repeat:
        no-repeat,
        no-repeat;

    background-position:
        top left,
        center;

}
The first image appears on top of the second image.

12. CSS Background Best Practices

  • Use high-quality but optimized images.
  • Compress images to improve website speed.
  • Use background-size: cover; for hero sections.
  • Choose readable text colors over background images.
  • Avoid repeating large images unnecessarily.
  • Use gradients for modern UI designs.
  • Keep background designs simple and clean.
  • Test backgrounds on desktop and mobile devices.
Well-designed backgrounds improve both appearance and user experience.

13. Common Mistakes

Mistake Correct Practice
Using very large images Optimize images before uploading.
Poor text readability Use overlays or high-contrast text.
Stretching images Use cover or contain.
Wrong repeat settings Use no-repeat when required.
Ignoring mobile devices Test backgrounds on different screen sizes. 

❌ Incorrect

body{

    background-image:url("large-image.jpg");

    background-repeat:repeat;

}

✔ Better

body{

    background-image:url("large-image.jpg");

    background-repeat:no-repeat;

    background-size:cover;

}
Optimized background images improve loading speed and website performance.

14. CSS Background Interview Questions

  1. What is the purpose of CSS background properties?
  2. How do you add a background image in CSS?
  3. What is the difference between cover and contain?
  4. What does background-repeat do?
  5. Explain background-position.
  6. What is background-attachment: fixed;?
  7. What is the purpose of background-origin?
  8. What is background-clip?
  9. What is the shorthand background property?
  10. Can multiple background images be used on one element?
These questions are commonly asked in HTML & CSS interviews.

15. Lesson Summary

In this lesson, you learned:
  • ✔ Introduction to CSS Backgrounds.
  • ✔ Background Color.
  • ✔ Background Image.
  • ✔ Background Repeat.
  • ✔ Background Position.
  • ✔ Background Size.
  • ✔ Background Attachment.
  • ✔ Background Origin.
  • ✔ Background Clip.
  • ✔ Background Shorthand.
  • ✔ Multiple Background Images.
  • ✔ Best Practices and Common Mistakes.
Congratulations! You have successfully completed the CSS Backgrounds lesson. You can now create attractive backgrounds using colors, images, positioning, sizing, and other CSS background properties.

Quick Quiz

Which value makes a background image cover the entire element?





← Previous Next →