• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Backgrounds

← Previous Next →

🔹 What are CSS Backgrounds?

CSS Background properties allow you to control the background appearance of elements — including colors, images, positioning, repeating, attachment, and more.

🔸 Common CSS Background Properties

Property Description
background-color Sets background color
background-image Sets a background image
background-repeat Repeats the background image
background-position Sets the position of the background image
background-size Specifies size of background image
background-attachment Fixes background while scrolling
background (shorthand) Combines all background properties

🔸 1. background-color

Sets the background color of an element.

div {
  background-color: lightblue;
}

🔸 2. background-image

Adds an image as the background.

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

🔸 3. background-repeat

Defines how the image repeats:

background-repeat: repeat;       /* default */
background-repeat: no-repeat;    /* no repeating */
background-repeat: repeat-x;     /* horizontal */
background-repeat: repeat-y;     /* vertical */

🔸 4. background-position

Sets the starting position of the image:

background-position: top right;

You can use values like left, right, center, bottom, or in px/%.

🔸 5. background-size

Specifies the size of the background image:

background-size: cover;      /* Fill entire element */
background-size: contain;    /* Fit within element */
background-size: 100px 200px; /* Custom size */

🔸 6. background-attachment

Controls scroll behavior:

background-attachment: scroll;   /* default */
background-attachment: fixed;    /* image stays in place */
background-attachment: local;

🔸 7. background (Shorthand)

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

🟢 Combines all background properties in one line.

Practice Questions

Q1. Set a yellow background color for a div.

Q2. Add a background image named bg.jpg.

Q3. Prevent the image from repeating.

Q4. Center the image horizontally and vertically.

Q5. Resize the background image to fully cover the div.

Q6. Fix the image in the background while scrolling.

Q7. Use a different background color for a header section.

Q8. Create a gradient overlay on a background image.

Q9. Use background-size: contain for a logo section.

Q10. Write shorthand to apply image + color + position.

CSS Backgrounds Quiz

Q1: Which property sets a background color?

A. color
B. background-color
C. border-color
D. text-background

Q2: What is the default value for background-repeat?

A. no-repeat
B. repeat
C. repeat-x
D. repeat-y

Q3: Which value makes the background image scale to fill the area?

A. auto
B. cover
C. contain
D. full

Q4: What does background-position: center center do?

A. Centers the image
B. Stretches image
C. Makes image fixed
D. Tiles image

Q5: Which property makes the background image not scroll with the content?

A. background-attachment: fixed
B. background-repeat: no-scroll
C. scroll-position
D. image-fixed

Q6: Which background-size value fits the image within its container?

A. cover
B. contain
C. auto
D. 100%

Q7: Which is the correct shorthand for background?

A. background: url("img.jpg") no-repeat;
B. bg: img("img.jpg");
C. background-img: "img.jpg";
D. background: image;

Q8: What will background-color: transparent; do?

A. Make background invisible
B. Fill with white
C. Fill with black
D. Add blur

Q9: Which value is valid for background-position?

A. left-top
B. top left
C. 400
D. middle

Q10: Which value fills the background completely without distortion?

A. cover
B. contain
C. repeat
D. full-fit
← Previous Next →
Login
Go Back Top