Use img tag and CSS code to get the HTML webpage full-screen background image. Another way is to use background image CSS code.
Examples of Html background image fullscreen
Full-screen responsive background image example code.
<!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>
Output:
Html background image full screen without CSS
Well, if you don’t want to use an external or internal stylesheet (CSS), a thing that I personally discourage, then you have to rely on inline style.
Firstly you’ll need to set the size of the <body> element then, set his background value.
<body style="size:1040px;height:960px;background:url('path/to/file.jpg') no-repeat; background-size: cover">
Do comment if you have doubts and suggestions on this tutorial.
Note: The All HTML Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version