Quick Reach
The background image property
In the last chapter, we learned how to use color as background in HTML elements using CSS. In this chapter, we will learn how to use the CSS background-image property in HTML elements.
The background-image property is used to set the image as background in the HTML elements. The background images can be used in various elements like across the page (body), lists, DIVs, Paragraphs, headings, and others.
A background image example
Background fixed size image example
Along with setting the image as background, CSS has other image background properties e.g. to specify the position of an image, repeat the image or not etc. These are explained with examples below; let us look at the syntax of using the background-image CSS property.
How to use the background-image property?
Following is the general syntax of using the background-image property:
background-image: url(‘image location‘);
Where value URL specifies the path of the image.
You can also use this:
background-image: none;
None: this is the default, that means no background image to be displayed.
Example of using the background-image property
In this example, we will simply set the background-image of the body, that goes across the page. As mentioned earlier, by default image will be repeated. If the image is smaller it will be repeated to cover the whole body as the background image.
See the demo by clicking the link or image below:
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>
|
Background image position example
In this example, we will use the text and image. The text will be aligned left and image to the right position of <h1> heading. Click the image or link to have a look:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<html>
<head>
<style>
/*Using CSS background*/
h1
{
background-image: url(TC_logo.png);
background-position: right;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1> Website logo </h1>
</body>
</html>
|
As you can see, the background position is set by using the following syntax:
background-position: right;
Background image: repeat or no-repeat example
As you can see in the above example, we used another line of code to specify the background as no-repeat i.e.
background-repeat: no-repeat;
To make an image repeat or not, we may specify following values in CSS background-repeat property:
To make background image repeat, use value:
repeat
To make background image as no repeat, use:
no-repeat
By default, this value is set to repeat. Or if you do not specify this value, the image will be repeated across the element as in the first example. See an example below with the default value:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<html>
<head>
<style>
/*Using CSS background*/
h1
{
background-image: url(TC_logo.png);
background-position: right;
}
</style>
</head>
<body>
<h1> Website logo </h1>
</body>
</html>
|
As you can see, the text and image are mixed up, as such, by default the image is repeated across the heading area.
Background image size
CSS3 comes up with the background-size property that sets the size of the image. This is how we can set the height and width of an image.
e.g.
background-size: 263px 60px;
Example of setting background image height and width
The following example shows how you can use the background image size property i.e to set the height and width of the image.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<html>
<head>
<style>
/*Using CSS background*/
h1
{
background-image: url(TC_logo.png);
background-size: 263px 60px;
background-position: right;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1> Website logo </h1>
</body>
</html>
|
Apart from height and width of the image, the background-size has the following options:
- cover: This value scales the background image to the maximum area of specified element.
- contain: This value fits the image inside the given element at its maximum so that no part of the image cuts.
Using multiple background images
You can set multiple image background by adding a comma “,” followed by second image URL.
This is how you can set the multiple background images:
background-image:url(“image1.png”),url(“image2.jpg”);
Further Reading: CSS Font
Leave A Comment?