Quick Reach
What is background property?
The CSS background properties are used to apply the background styling to HTML elements. For example, in the <h1> heading, you may want to use a specific color or image as a background. While in paragraphs or Div you may want different background color or an image etc.
>>A background-color property example
CSS gives options to control how to use the background color or images or other background properties. For example, whether to repeat the image or not by using the background property.
You may also specify whether background image should be scrolled with the page or not in the background CSS property. The background property also allows mixing the background color with the image.
A basic example of background property
Basic syntax of background property
Following is the basic syntax to use the background property with the single declaration:
background: 000000 url(‘image.jpg’) right;
For example:
h1
{
background: #000000;
}
The example sets <h1>’s background color as black in the document by using background property of CSS. You may also set the background properties like image, color, position separately.
A few examples are shown below with links to individual background property’s chapters.
Example of using background properties
In the following example, we will use the background property in headings i.e. h1 and h2.
The <h1> is simply given the background color as black. While the <h2> is styled with multiple background properties including background-color, background-image, position etc. by using individual background properties.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<html>
<head>
<style>
/*Using background*/
h1
{
background-color: #000000;
color: #FFFFFF;
}
h2
{
background-color: #00FF00;
background-image: url(exclamation.jpg);
background-position: right;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: contain;
color: #000000;
}
</style>
</head>
<body>
<h1>This is background chapter</h1>
<h2>H2 with many background properties<br/>
H2 with many background properties</h2>
</body>
</html>
|
An example of background-color property
See the following example to set the background color of a few HTML elements.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<html>
<head>
<style>
/*Using CSS background*/
h1
{
background-color: black;
color: #FFFFFF;
}
p
{
background-color: #00FF00;
}
.divex
{
background-color: rgb(012,202,111);
}
</style>
</head>
<body>
<h1>Heading background color set by color name</h1>
<p>Paragraph background color set with HEX value</p>
<div class=“divex”>Div background color is set with RGB value</div>
</body>
</html>
|
A background-image property example
The following example sets the background image of the body of the web page.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<html>
<head>
<style>
/*Using CSS background*/
body
{
background-image: url(TC_logo.png);
}
</style>
</head>
<body>
</body>
</html>
|
A background-position example
In the following example, the background-position property is used to set the image position in the background. See the example by clicking the link below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<html>
<head>
<style>
/*Using CSS background*/
div
{
width:600px;
height: 500px;
background-image: url(TC_logo.png);
background-position: right top;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>Tutorials Collection logo</div>
</body>
</html>
|
CSS background properties
Following are the individual properties related to the background.
- background-color (sets the background color of the element)
- background-image (This sets the background image of an element)
- background-position (This property sets the starting position of the background image. For example, image starts where the text ends in <h1> or <h2> etc.
- background-size (This property sets the size of the image (CSS3))
- background-attachment (This property controls the scrolling of image in the background)
- background-repeat (This property is used to set whether to repeat an image in the background of an element or not.)
- background (This property is used to set one or more above mentioned properties in the single declaration)
Few of these background properties are explained in their respective chapters along with examples.
Leave A Comment?