In this tutorial we will show you the solution of background image tag in HTML, in HTML there are many ways to use images. We find that in html, you are able to customize any image according to you.
You are also able to set an image as background, but most of developer have a problem that how to set image as background with the help of tags.
So, today our topic is how we are able to use background images with tags in html.
Step By Step Guide On Background Image Tag In HTML :-
Now, we said that there are many ways will the help of which you are able to apply background image to webpage with the help of body tag.
Hence, in this way, it is cleared that the tag used for background image most time is body tag. You can also use other tags with the help of which you can apply background image.
But this is used when you want to apply different background images for different tags, sections and others. So, that every division has its own background image.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
<style>
body{
background-image: url(demo10/logo.jpg);
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div>
</div>
<div>
</div
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively. Here, before closing head tag we use style tag, which will be discussed later in next point.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here, we create a body tag, but you found that in body that there is no any image tag that is img. This is because we here want to set image in background of webpage. So, we give a class to body of html code and in CSS, we here use properties of CSS.
- First property used here is background image, this is used to set an image as background the URL of image is given in the value.
- The next attribute used is background-repeat that is already discussed in previous session. This is used so that our image does not repeat again and again.
- The last attribute used here that is most important is background-size, with the help of this attribute the image gets fixed in background and does not changes itself, when webpage is zoomed in and out. The value that is given is cover.
- You can also apply these properties to div tag with different dimensions to use different background images.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here, we can say that now you are able to set an image as background with the help of tag.
The size may be any of screen, and this code helps you to cover full screen, without any display size problem. I hope this tutorial on background image tag in HTML helps you.
About Amruta
