CSS Background Practice Questions with Solutions

By /

Introduction

CSS background properties help you control the appearance of an element’s background. You can set background colors, images, repeat patterns, positions, sizes, and attachment behavior. These properties improve the visual design of a webpage. In this chapter, you’ll practice CSS background properties through beginner-friendly solved questions with simple explanations. CSS Background Practice questions with solutions help to build concepts.

Question 1: Change the Background Color of the Webpage

Problem Statement

Write CSS to change the background color of the webpage to light blue.

CSS Code

body {
    background-color: lightblue;
}

Output

The entire webpage displays a light blue background.

Explanation

  • background-color changes the background color of an element.
  • body applies the color to the entire webpage.
  • lightblue is a predefined CSS color name.

Question 2: Add a Background Image

Problem Statement

Write CSS to display an image named background.jpg as the background of the webpage.

CSS Code

body {
    background-image: url("background.jpg");
}

Output

The image background.jpg appears as the webpage background.

Explanation

  • background-image adds an image behind the content.
  • url() specifies the image file location.
  • The image is displayed in the background of the selected element.

Question 3: Prevent the Background Image from Repeating

Problem Statement

Write CSS to display the background image only once.

CSS Code

body {
    background-image: url("background.jpg");
    background-repeat: no-repeat;
}

Output

The background image appears only once without repeating.

Explanation

  • background-repeat controls image repetition.
  • no-repeat prevents the image from repeating horizontally and vertically.
  • This is useful for banners and hero sections.

Question 4: Position the Background Image at the Top Right

Problem Statement

Write CSS to place the background image in the top-right corner of the webpage.

CSS Code

body {
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-position: top right;
}

Output

The background image appears in the top-right corner.

Explanation

  • background-position controls the image location.
  • top right places the image at the top-right corner.
  • It works with both keywords and coordinate values.

Question 5: Make the Background Image Cover the Entire Webpage

Problem Statement

Write CSS to make the background image cover the entire webpage.

CSS Code

body {
    background-image: url("background.jpg");
    background-size: cover;
}

Output

The background image covers the entire webpage while maintaining its aspect ratio.

Explanation

  • background-size controls the size of the background image.
  • cover enlarges the image to fill the entire element.
  • Some parts of the image may be cropped to maintain its proportions.

Question 6: Fit the Entire Background Image Inside the Webpage

Problem Statement

Write CSS to display the complete background image inside the webpage without cropping it.

CSS Code

body {
    background-image: url("background.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

Output

The entire background image is visible without being cropped.

Explanation

  • background-size: contain; scales the image to fit inside the element.
  • The complete image remains visible.
  • Empty space may appear if the image and screen have different aspect ratios.

Question 7: Keep the Background Image Fixed While Scrolling

Problem Statement

Write CSS to keep the background image fixed when the user scrolls the webpage.

CSS Code

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

Output

The background image stays in the same position while the page content scrolls.

Explanation

  • background-attachment controls how the background behaves during scrolling.
  • fixed keeps the image stationary.
  • This effect is commonly used in landing pages and portfolio websites.

Question 8: Use the Background Shorthand Property

Problem Statement

Write CSS using the shorthand property to add a light gray background with a non-repeating image positioned at the center.

CSS Code

body {
    background: lightgray url("background.jpg") no-repeat center;
}

Output

The webpage displays:

  • A light gray background
  • A centered background image
  • The image does not repeat

Explanation

  • background is a shorthand property.
  • It combines multiple background properties into a single line.
  • Shorthand code is shorter and easier to maintain.

Question 9: Apply Different Background Colors to Different Elements

Problem Statement

Write CSS to give an <h1> a light blue background and all <p> elements a light yellow background.

CSS Code

h1 {
    background-color: lightblue;
}

p {
    background-color: lightyellow;
}

Output

  • The <h1> displays a light blue background.
  • All paragraphs display a light yellow background.

Explanation

  • Different selectors can have different background colors.
  • background-color changes the background of each selected element.
  • This improves the visual separation between sections.

Question 10: Add a Background Image to a <div>

Problem Statement

Write CSS to display the image nature.jpg as the background of a <div> element.

CSS Code

div {
    background-image: url("nature.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

Output

The <div> displays nature.jpg as its background image.

Explanation

  • background-image adds an image to the <div>.
  • background-repeat: no-repeat; prevents image repetition.
  • background-size: cover; fills the entire <div> with the image.

Key Takeaways

  • background-color changes the background color of an element.
  • background-image adds an image as the background.
  • background-repeat controls whether the image repeats.
  • background-position changes the image location.
  • background-size controls the image size using values like cover and contain.
  • background-attachment: fixed; keeps the image fixed during scrolling.
  • The background shorthand property combines multiple background properties into one declaration.

Frequently Asked Questions (FAQs)

1. What is the CSS background property?

The CSS background property is used to control the background of an HTML element. It can add colors, images, positions, sizes, and other background effects.

2. What is the difference between cover and contain?

cover fills the entire element and may crop part of the image, while contain displays the entire image without cropping but may leave empty space.

3. How do I stop a background image from repeating?

Use the following CSS property:

background-repeat: no-repeat;

This displays the image only once.

4. What does background-attachment: fixed; do?

It keeps the background image fixed in place while the webpage content scrolls.

5. What is the purpose of background-position?

background-position specifies where the background image appears, such as top, center, bottom, left, or right.

6. Can I apply a background image to a <div>?

Yes. Any HTML element, including a <div>, can have its own background image using the background-image property.

7. What is the background shorthand property?

The background shorthand property combines multiple background properties such as color, image, repeat, and position into a single CSS declaration.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top