CSS background

CSS background is used to define the background for an element. With this property of CSS, you can add different background properties in a single setting. There are many background properties you can use in CSS to work on the background of an element.

It can be used to add background color and image to an element. You can also define the position and attachment for the background image added to an element.

List of Related CSS Properties With Description

Learn each CSS background properties given below to add a good background to any element.

Properties Description
background This is a shorthand property which sets all background property in just a single setting.
background-color Add color to the background of an element.
background-image Set a background image to an element.
background-attachment Specify the scrolling behavior of a background image for an element.
background-position This property can be used to set the position of the added background image.
background-repeat You can assign this property when you want to show the image for one time or multiple times.

The syntax and examples are given below for all the above CSS properties for adding the background.

Add Background Color in CSS

If you want to add the color of any element, you have to use background-color the property of CSS. There is a certain value of the color you have to assign to this property.

The syntax of this CSS property is given below.

Syntax
background-color: color name || HEX value || RGB value

The above syntax showing the colors as the value you have to give to this property. To know more about the values you have to assign to this property, read more in CSS background-color.

Example

Test it Live

Output

This is a div element with background color.

Set Background Image in CSS

You can set any background image an element using CSS background-image property. If you add a background image to an element, its content will display over the image. The image gets added to the backside of the element.

Syntax
background-image: URL(enter URL location here…)

The above syntax showing that you have to just mention the location of the image to display as background. Its the URL which is the exact location of the image.

You can check the example given below to see the background image given to an element. So, let’s start the example.

Example

Test it Live

Output

A div element with background image.

The above example showing the background image with the repeat image. If you don’t want to repeat the image, you have to check the background-repeat property is given below.

CSS Background Attachment

If you to make the background image fixed or scroll, you have to use the CSS background-attachment property. It sets the background fixed and on a scroll, it remains visible to the fixed part of the screen.

Check the syntax below to create a fixed image using CSS.

Syntax
background-attachment: fixed || scroll || local

The above showing that, there are 3 values you can assign to this CSS property. The mostly used property of this property is fixed which makes the image fixed to the visible screen.

Example

Test it Live

Output

A div element with background image fixed attachment.

If you scroll your mouse to the top or bottom, you can check that the image remains fixed at the backside of the element. You can also assign the other 2 values for this property of CSS.

CSS Background Repeat

By default, the background image of an element showing as the repeated images. You can control this repetition of the image using the background-repeat property of CSS.

See the syntax of this property to use in the CSS.

Syntax
background-repeat: no-repeat || repeat-x || repeat-y

The above syntax showing that there are 3 value options you can assign to this property. no-repeat value displays the image for only single time, repeat-x the value displays the image for multiple times horizontally and repeat-y value displays the image for multiple times vertically.

You have to choose the value according to the repetition you want for the image.

Example

Test it Live

Output

Background image of div with no repeat.

The above example using the no-repeat value to display the image for single times only. However, you can use the other value options too to control the repetition as per your requirement.

How to Set the Position of Back Image Using CSS

To set the position of the background image, you have to use the CSS background-position property. You can control the horizontal and vertical position of the image using this property.

The syntax of this property is given below.

Syntax
background-position: value1 value2
Where,
value1 = [left || right || top || bottom || percentage || length]
value2 = [left || right || top || bottom || percentage || length]

The above syntax showing that there are 2 values you have to assign to this property. Check the above syntax to assign the values to the property.

The options for the two values are given in the syntax above. See the example below to check how to assign the value to this property.

Example

Test it Live

Output

Right positioned background image of div.

The above example showing the image aligned to the right side of the screen and to the top. Assing the position values as per your requirement.

Other Value Options For the Above Properties

In addition to all the above properties, you can also assign below value to the background CSS properties.

Properties Description
none You can use this value when you want to assign no value to the background of an element.
initial Used to define the property initial value.
inherit Use this value to define the computed value of the property on the parent of the element.
unset Set all the properties to their parent value if inheritable.