Html background image full screen | Responsive background image

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:

responsive Html background image full screen

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


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.