In this tutorial we will show you the solution of background image CSS cover, as we see in some websites that for example in www.tesla.com, in this website we see that their background is fully covered with images of various products which they provide.
As, the look of website seems to be very attractive. Hence, today we will show you that how to apply this type of background having images to your website which will covers whole background.
Step By Step Guide On Background Image CSS Cover :-
There are many ways with help of which we can apply images as background.
A one main thing to notice is that on zoom in and out the size of image does not change.
So, how we can do this. Is their different codes for all this functionalities or only single code is enough to make this all possible?
Let us see the example below which helps us for better understanding.
<!doctype html>
<html>
<head>
<title> CSS tutorials </title>
<style>
body{
height: 100%;
padding: 0px;
}
.bgImage {
background-image: url("iron_man.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body class=”bgImage”>
<h1>
Talker’s code – CSS tutorials
</h1>
<h2>
Background image CSS cover
</h2>
</body>
</html>
- As, here we see that we that in above example we show you an example in which html and CSS codes are used.
- Let us understand the above codes step by step.
- 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 paried 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. Here, we give a class to body which helps us to apply image as background using CSS. Inside body, we use heading tags to show headings.
- Now, our CSS is written under style tag which is again used under head tag. Inside style, we apply CSS to body and give body height 100%, with no padding.
- In next line, we apply CSS to body with help of class. We can also apply CSS as above codes. But it is upon you that how we done this.
- As we see, we use background image to apply image with its position center and no repeat. No repeat means that if image has less width and height than required then it does not repeat to cover full background of webpage.
- At last, the important is to make image of full background. For this we use background size property with its value cover, which helps to make image cover full background. We hope you easily understand how to use image as background to cover full webpage using 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 CSS to cover full background using image.
I hope this tutorial on background image CSS cover helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
