Background image
In this article we are going to learn about background image in css, how to add image as the background of an html element in html page.
We learnt about css in general, lists style in css, liquid layout in css, links style in css, box shadow in css, text align in css, table style in css, text shadow in css, letter spacing in css, word spacing in css, text transform in css and text decoration in css so, we will be focusing on background image.
Background image
Background image is a Cascading Style Sheet property used to add the image as the background of any html element.
Let us create a div element with background image property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.background-image-example {
background-image: url(image/coverphoto.png);
background-size: contain;
}
<style/>
</head>
<body>
<div class="background-image-example">This is a div element with background image added.</div>
</body>
</html>
So, we should have the following results and the image is behind the text and the image is repeated to take up full div element width.
Let us create another div element with background image property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.background-image-example {
background-image: url(image/photo.png);
background-size: contain;
color: red;
}
<style/>
</head>
<body>
<div class="background-image-example">This is a div element with background image added.</div>
</body>
</html>
So, we should have the following results and the image is behind the text and the image is repeated to take up full div element width.