In this tutorial we will show you the solution of how to use background image in CSS, mainly in CSS, there are many ways with help of which we can apply background images and manipulate them in html.
As, in last tutorial, we understand how to use background image CSS cover.
Step By Step Guide On How To Use Background Image In CSS :-
Now, lets see the codes below that how to use background image in CSS.
<!DOCTYPE html>
<html>
<head>
<title> CSS tutorials </title>
<style>
body {
background-image: url(images/img1.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<h1>
Talker’s code – CSS tutorials
</h1>
<h2>
How to use background image in CSS
</h2>
</body>
</html>
- Here, first of all we create a basic structure of html, in which we use <!DOCTYPE html> which defines the type of document. And next one is our html tags. These tags are paired tag and all the data regarding html is written inside these tags.
- After we use our head tag which is again paired tag and contains title and meta information of the webpage. The data written inside head is not showed on the webpage.
- Now, next is our title tag which defines the title of webpage. The tag which has its closing tag is known as paired tag. So, this is again paired tag.
- Now, next is body which is main tag of html. The data which we written inside body is showed in webpage. Mostly all tags which are helpful to show data or information on screen is written under body tag
- As, above we see that we apply image using CSS to body. We can also apply background image to a division, section, heading, paragraph tag also. The process is same to all as we today use.
- Now, we see that above we use background image property to apply image as background. At next use background-size, background-repeat and background-position.
- The first property here that is background-size is used to define the size of image. As, here we use cover which helps to cover full background as image. If you not define size then image will use its own size to cover background.
- Now, next is background repeat. This is used if the image has less size than screen, etc. then the image will repeat again and again to cover whole webpage. If we give it no-repeat then image will show only once time in webpage.
- Now, at last background position is used which helps to give dimensions to image or we can also say alignment of image. Here, we used center to align image center of webpage.
- Hence, there are many other properties also which are used on background image also. We specify only main from them. Whereas in next tutorials, we will also understand many other image properties used in CSS.
Conclusion :-
At last, in conclusion here we can say that with the help of this article we are able to understand about how to use background image in css.
I hope this tutorial on how to use background image in CSS helps you and the steps and method mentioned above are easy to follow and implement.
