HTML Code For Background Image Full Screen
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Pragati
In this article we will show you the solution of HTML code for background image full screen, this can be done without JavaScript by using the CSS background-size attribute.
Web designers frequently stretch background images to take up the whole browser viewport since it makes our websites look more inviting to users.
Using some few lines or CSS into our applications makes it rather simple to complete this task.
To speed up your page load on small displays, a media query will serve the scaled-down version of both the background picture file. It's optional to select this alternative.
Again for the vast majority of all widescreen computer displays currently on the market, we will be covered with this size.
We will need to serve them a 1.5MB file, though. A backdrop image consuming that much data is never a smart idea, but it is particularly awful for mobile Internet.
Moreover, on devices with small screens, your image dimension is just too huge. The magic happens right here.
The background image is scaled by the browser each time this property/value pair was set to fit the width and height of an element. Here, the body element is being used as an illustration.
A browser will programmatically increase a background picture if its size exceeds the body element's dimensions.
This occurs on displays with small background graphics and high quality.
A website can be made to look interesting and engaging by adding images inside a variety of ways.how on add background pictures to webpages using HTML and CSS in this blog post.
The most common and simple way to include a background picture is by means of this background image attribute found within the <body> tag.
Step By Step Guide On HTML Code For Background Image Full Screen :-
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
</style>
</head>
<body>
<div id="bg">
<img src="bg.jpg" alt="">
</div>
</body>
</html>
- Your HTML document should contain an open & closing HTML tag as well as an open & closing head tag and body tag. You don't require the use of the HTML tag if you want to add a background picture. Instead of using HTML, this lesson illustrates how to add a background picture using CSS.
- Cascading style sheets' first tag is this one (CSS). Before the "</head>" tag and after the "<head>" tag.
- As an alternative, you may alternatively construct your CSS inside a separate CSS page & link that to your HTML document.
- From this point on, your HTML document's body will be styled using CSS.
- This line specifies a background image that will be utilized. The word "[image url]" should be changed to an actual URL of an image we want to use.
- When a filename has neither a file path nor a URL, including such background-image: url("background.png");.Once more, the web browser searches your web page folder for the named image.
- To save your work, select File then Save after finishing.
- Finally, after closing all tags, </body></html> but also code should be executed.
Conclusion :-
While creating a website or blog post, images are crucial since they make the material more aesthetically pleasing and intelligible.
The blog or website without photos becomes dull, and readers start to leave.
Background pictures have a huge practical impact on the a web page's interactivity.
I hope this article on HTML code for background image full screen helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
