Html Background Image Full Screen | Responsive Background Image

Trang chủ » Html Image Fill Page » Html Background Image Full Screen | Responsive Background Image

Có thể bạn quan tâm

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

Share this:

  • Facebook
  • WhatsApp
  • LinkedIn
  • More
  • Twitter
  • Print
  • Reddit
  • Tumblr
  • Pinterest
  • Pocket
  • Telegram
  • Email

Related

Từ khóa » Html Image Fill Page