Background Properties in CSS

Last update: 23rd October 2025

Some of the most commonly used background properties include:

background-color – lets you fill an element with a solid color.
background-image – allows you to place an image behind your content.

These properties help you set the mood, improve readability, and make your site visually appealing. Whether you're adding a splash of color or a full-screen image, CSS makes it easy to bring your design ideas to life.

CSS background-color Property

The background-color property is used to fill the background of any HTML element with a solid color. This element could be the entire page (body), a section (div), a table, or even a single cell. You can define the color in different ways:

Using hex code: background-color: #F1F1F1;

Using color keywords: background-color: gray;

RGB color values: background-color: rgb(19,60,154);

RGB color values are a combination of 3 primary colors like the red, green and blue. Combining or mixing these colors can form approximately 16 million different colors. The values range from 0 to 255.

Example:

<style>
    body { 
        background-color: #FF3300; 
    }
</style>

Hex code value of #FF3300 = ---------

The background-color property lets you fill an element, like the entire page, with a solid color. In the above example, the color is defined using a hex code: #FF3300. A hex code is a six-digit combination of numbers and letters, always starting with a # symbol (called a hash). Each hex code represents a specific color, and by changing the values, you can create millions of different shades. To explore and choose colors easily, you can use a color picker tool that shows both the hex code and its visual preview.

🚀 Want to convert HEX to RGB? Try our Hex to RGB Converter Tool.

CSS background-image Property

The background-image property in CSS lets you add an image behind any HTML element, whether it's a <div>, a table, or even the entire page. It's a great way to enhance the visual appeal of your site. For example, if you want to set a background image for a <div>, the CSS markup is simple and easy to use.

div {
    background-color: #F1F1F1;
    background-image: url("https://www.encodedna.com/2013/11/back1.png");
}

Similar Example: Set background image of an element using JavaScript

In the example above, I've combined the background-color and background-image properties. The background color acts as a fallback, it fills the space while the image is loading or in areas where the image doesn't fully cover the element. Choosing a color that complements the image helps maintain a smooth and consistent visual experience, even if the image takes a moment to appear.

Multiple images can be used as background of any element using other properties too.

CSS background-repeat Property

By default, a background image in CSS is designed to repeat and cover the entire area of an element, whether it's a small box or the whole page. This works well for patterns or images with a single shade. However, there are times when you might want the image to appear just once, or repeat only in one direction, either horizontally or vertically. CSS gives you control over this using the background-repeat property, so you can fine-tune how and where your image appears.

01) background-repeat: repeat; This the default value of this property and this means that the image will cover the entire background of an element.

02) background-repeat: repeat-x; Repeat the image horizontally along the x axis.

03) background-repeat: repeat-y; Repeat the image vertically along the y axis.

04) background-repeat: no-repeat; Do not repeat the image and show it once using its original size.

05) background-repeat: inherit; Inherit the "repeat" properties from its parent element, if any.

CSS background-position Property

You can control where a background image appears within an element by setting its horizontal and vertical position. CSS lets you use keywords like top, bottom, left, and right to place the image in common corners. For more precise placement, you can use pixel values, for example, 5px 20px positions the image 5 pixels from the left and 20 pixels from the top. This gives you fine-tuned control over how your background image is displayed.

background-position: left bottom;

background-position: 5px 20px;
/* 5 pixels from the "left" (horizontal) and 20 pixels from the "top" (vertical).*/

CSS background-attachment Property

The background-attachment property controls how a background image behaves when the user scrolls the page. By setting this property, you can choose whether the image stays fixed in place (fixed) or moves along with the content (scroll). This is especially useful for creating visual effects like parallax scrolling or keeping a decorative image anchored while the rest of the page moves.

The property accepts 3 different type of values such as fixed, scroll or inherit.

background-attachment: fixed; - The image remains fixed on the the page when the page is scrolled. So if the user is scrolling the page down or up, the image remains in its defined axis or position.

background-attachment: scroll; - This is just the oppostite of the above value. When a user scrolls the page down, the image will scroll up and vice versa.

Multiple background images

The element background can also define and display multiple images. This features were introduced in CSS-3, an advanced version of CSS. In this, the properties will accept more than one value seperated by a comma.

Just by declaring more images will not make the page look good, but also multiple values for background-repeat and background-position has to be assigned.

div {
    background-color: #FFF;
    background-image: url("https://www.encodedna.com/2013/11/back1.png"), url("https://www.encodedna.com/2013/11/back2.png");
    background-repeat: repeat-x, repeat-y;
    background-position: 5px 20px, 120px 20px;
}

In the above example we have 2 background images with repeat-x and repeat-y. Also it has been positioned individually according to our need.

See this Demo

CSS background-size property

This CSS-3 property will allow a developer to resize the image or images according to their needs. The images can be set using keywords like contain and cover or by using percentage values like 20% 50%. Also you can define numeric values in pixels such as 80px 50px.

Using pixels (background-size property)

div {
    background-repeat: no-repeat;
    background-size: 80px 50px;
}

Using percentage (background-size)

div {
    background-image: url('https://www.encodedna.com/2013/11/back2.png');
    background-repeat: no-repeat;
    background-size: 20% 80%;
}

Using "contain" keyword (background-size)

div {
    background-image: url('https://www.encodedna.com/2013/11/back2.png');
    background-repeat: no-repeat;
    background-size: contain;
}

This property will scale or expand the image proportionately to set the background as large as possible.

The image back2.png, has "width 106px and height 106px". But the DIV element, let us assume has width: 500px and height: 300px. So the contain property will expand the image to an extent, where it "fits" inside the element.

Using keyword "cover"

div {
    background-image: url('https://www.encodedna.com/2013/11/back2.png');
    background-repeat: no-repeat;
    background-size: cover;
}

No matter what "height and width" are set for the element, the cover property will cover the entire page or elements background with the image by scaling it as large as possible.

Background "Shorthand"

Sometimes we have to deal with many background properties with many elements. And this requires lots of code and lots of space. To reduce the code size and disc space, properties can be combined and written as a single rule, using the Shorthand.

01) background-color
02) background-image
03) background-repeat
04) background-attachment
05) background-position
06) background-origin
07) background-clip
08) background-size

For example,

background: #F1F1F1 url("back1.png") repeat-x fixed 20px 80px;

👇 Here's a simple example you can use to visualize how the shorthand CSS background property works.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Background Shorthand Demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #F1F1F1 url("back2.png") repeat-x fixed 20px 80px;
      height: 2000px;   /* Height to demonstrate scroll effect */
    }

    .content {
      padding: 100px;
    }

    h1 {
      color: #333;
    }
  </style>
</head>
<body>
  <div class="content">
    <h1>CSS Background Shorthand Example</h1>
    <p>This page uses a shorthand background declaration to apply color, image, repeat, attachment, and position all in one line.</p>
    <p>Scroll the page to see how the background image stays fixed while the content moves.</p>
  </div>
</body>
</html>

The background property is supported by all major browsers.

← PreviousNext →