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.
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
|
1 2 3 4 5 6 7 8 |
<style> .bg-color{ background-color: #ccc; } </style> <div class="bg-color"> <p>This is a div element with background color.</p> </div> |
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.
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
|
1 2 3 4 5 6 7 8 |
<style> .bg-img{ background-image:url(../../images/nature.jpg); min-height:200px; } </style> <div class="bg-img"></div> <p>A div element with background image.</p> |
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.
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
|
1 2 3 4 5 6 7 8 9 |
<style> .bg-img-attach{ background-image:url(../../images/nature.jpg); background-attachment:fixed; min-height:200px; } </style> <div class="bg-img-attach"></div> <p>A div element with background image fixed attachment.</p> |
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.
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
|
1 2 3 4 5 6 7 8 9 |
<style> .bg-img-repeat{ background-image:url(../../images/nature.jpg); background-repeat: no-repeat; min-height:200px; } </style> <div class="bg-img-repeat"></div> <p>Background image of div with no repeat.</p> |
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.
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
|
1 2 3 4 5 6 7 8 9 10 |
<style> .bg-img-position{ background-image:url(../../images/nature.jpg); background-repeat: no-repeat; background-position: top right; min-height:200px; } </style> <div class="bg-img-position"></div> <p>Right positioned background image of div.</p> |
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. |