Background Properties in CSS

Last update: 26th July 2022

For example,

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

Hex Value of #FF3300 = ---------

This property will paint the background of the page using the hex (hexadecimal) code #FF3300. The hex code actually defines a color, prefixed with the symbol # also pronounced as hash. Using hex code, you can actually define more colors. All you need is a good color picker.

You will like this Tool: Convert a Hex Color Code to RGB (red, green, blue)

CSS background-color Property

This property is used to color the background of an element. The element can be anything like the body, div or a table. The colors can be defined using a “hex” code, like we did in the above example. Also you can define the colors using keywords like gray, blue, red etc.

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.

Now, try this tool

CSS background-image Property

This property will allow you to define and display an image as background of any element. Let’s say we have a <div> element and we want to set the background image for this element. The mark up is very simple for this.

div {
    background-color: #F1F1F1;
    background-image: url("back1.png");
}

In the above example, we have used background-color property along with background-image. The background color in this case can be a color matching the image so that if the image takes time to load or any space which is not covered by the image, can be filled with the defined background color.

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

CSS background-repeat Property

Technically a background image is set to cover the entire background of an element or the page itself. An image depicting a single shade can be used to cover the entire background. But sometimes we need an image to be displayed just once (as background) and can also be set horizontally or vertically using an axis.

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

The background images can be positioned on an element using horizontal and vertical positioning by using the values like ‘top’, ‘bottom’, ‘left’ or ‘right’. Also you can use numeric values denoting number of ‘pixels’ like ‘5px 20px’.

background-position: left bottom;

background-position: 5px 20px;
5 pixels from the “left” (horizontal) and 20 pixels from the “top” (vertical).

Check these properties in action using the background-repeat: no-repeat; property, so the image is in its original form and you can position it accordingly.

CSS background-attachment Property

When defined, this property will make sure whether the background image will be set as a fixed image or will scroll if the user scrolls the page.

This 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("back1.png"), url("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('back2.png');
    background-repeat: no-repeat;
    background-size: 20% 80%;
}

Using "contain" keyword (background-size)

div {
    background-image: url('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 in our demo (back2.png) has a similar width and height of 106px each. 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('back2.png');
    background-repeat: no-repeat;
    background-size: cover;
}

It does not matter what height and width are set for the element, the property cover will cover the entire page or element 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.

Here background shorthand order.

01) background-color
02) background-image
03) background-repeat
04) background-attachment
05) background-position

For example,

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

image

The background property is supported by all major browsers.

← PreviousNext →