CSS Backgrounds

By /

In this chapter, you will learn how to style the background of a web page or an HTML element. CSS allows you to add background colors, images, and control how those images appear. Let’s understand CSS backgrounds properties step by step.

What is a CSS Background?

A background is the area behind the content of an HTML element. For example, you can add a background color to the entire page:

body {
  background-color: lightblue;
}

You can also add a background to a specific element:

div {
  background-color: yellow;
}

CSS provides several properties for working with backgrounds.

1. CSS Background Color

The background-color property is used to set the background color of an element.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Background Color</title>

  <style>
    body {
      background-color: lightblue;
    }

    h1 {
      background-color: yellow;
    }

    p {
      background-color: white;
    }
  </style>
</head>

<body>

  <h1>CSS Backgrounds</h1>

  <p>This paragraph has a white background.</p>

</body>
</html>

Result

  • The page background will be light blue.
  • The heading will have a yellow background.
  • The paragraph will have a white background.

You can use color names, HEX values, or RGB values with the background-color property.

For example:

h1 {
  background-color: #3498db;
}

2. CSS Background Image

The background-image property is used to add an image as the background of an element.

The basic syntax is:

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

The image name inside url() should match the name of your image file.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Background Image</title>

  <style>
    body {
      background-image: url("background.jpg");
    }
  </style>
</head>

<body>

  <h1>CSS Background Image</h1>

  <p>This page uses an image as its background.</p>

</body>
</html>

For this code to work, save an image named background.jpg in the same folder as your HTML file.

Your folder should look like this:

my-project/
│
├── index.html
│
└── background.jpg

3. CSS Background Repeat

By default, a background image repeats if the image is smaller than the element. The background-repeat property controls this behavior.

Do Not Repeat the Image

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

Now, the image will appear only once.

You can also use:

background-repeat: repeat;

This repeats the image both horizontally and vertically.

Other values include:

background-repeat: repeat-x;
background-repeat: repeat-y;
  • repeat-x repeats the image horizontally.
  • repeat-y repeats the image vertically.

4. CSS Background Position

The background-position property is used to control where the background image appears.

For example:

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

This places the image in the center.

You can also use values such as:

background-position: top;
background-position: bottom;
background-position: left;
background-position: right;

A commonly used value is:

background-position: center;

5. CSS Background Size

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

For example:

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

The cover value makes the image cover the entire background area.

Another useful value is:

background-size: contain;

contain makes the complete image fit inside the element.

Complete Background Example

Now, let’s combine some background properties in one example.

<!DOCTYPE html>
<html>
<head>
  <title>CSS Background Example</title>

  <style>
    body {
      background-image: url("background.jpg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }

    h1 {
      color: white;
      text-align: center;
    }

    p {
      color: white;
      text-align: center;
    }
  </style>
</head>

<body>

  <h1>Welcome to My Website</h1>

  <p>This page has a background image.</p>

</body>
</html>

Make sure the background.jpg file is in the same folder as your HTML file.

This example:

  • Adds an image as the background.
  • Prevents the image from repeating.
  • Places the image in the center.
  • Makes the image cover the background area.

Quick Recap

  • background-color adds a background color.
  • background-image adds an image as the background.
  • background-repeat controls whether the image repeats.
  • background-position controls the image position.
  • background-size controls the size of the background image.
  • cover is commonly used to make an image cover the entire background.

Frequently Asked Questions (FAQs)

Q1. What are CSS backgrounds?

CSS backgrounds are used to style the area behind the content of an HTML element. You can add background colors and images and control how background images appear.

Q2. How do I add a background color in CSS?

You can add a background color to an HTML element using the background-color property. It can be applied to the entire web page or individual elements.

Q3. How do I add a background image in CSS?

The background-image property is used to add an image as the background of an HTML element or web page.

Q4. What does background-repeat do in CSS?

The background-repeat property controls whether a background image repeats. You can repeat the image, stop it from repeating, or repeat it only horizontally or vertically.

Q5. What is the difference between background-size cover and contain?

The cover value makes the background image cover the entire available area, while contain makes the complete image fit inside the element without being cut off.

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

Related Posts

Scroll to Top