HTML Background Image Fit Or Scale To Screen Size
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Pragati
In this tutorial we will show you the solution of HTML background image fit or scale to screen size, 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 able to make an image slider using jQuery, you are able to make a task that zoom image on mouse over.
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 Fit Or Scale To Screen Size :-
Now, as there are many ways to set an image as background. 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 you are able to fit an image as background in html and the zoom of browser does not effect this.
Now, there is a task from our side that you have to create a link with help of image without any text.
So that when we click on background image that covers full screen bring us to next webpage, that already contain an image. I hope this tutorial on HTML background image fit or scale to screen size helps you.
About Pragati
