HTML Background Image Full Screen
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Amruta
In this tutorial we will show you the solution of HTML background image full screen, in HTML there are many properties of images. We find that in html, you are able to customize any image according to you.
You are also able to set and image as background, but most of developer have a problem that how to set image as background.
So, that when screen gets zoomed in and out the size of image remains same. Means it covers the whole body of entire webpage.
Step By Step Guide On HTML Background Image Full Screen :-
Now, as there are many ways to set an image as background with full screen. But we will teach you the one in which the image should covers full screen.
This can be done with or without CSS. The below example will show you that how you able to set background image in html in full screen and no changes occur when we try to zoom in and out webpage.
<!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>
</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.
- 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 full screen.
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 HTML background image full screen helps you.
About Amruta
