Setting up a html page with image background fullscreen to be responsive - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

Setting up a html page with image background fullscreen to be responsive

Demo Code

ResultView the demo in separate window 

<!--<!--from  w  w w  .j a v a2 s  .c o m-->
Created using JS Bin
http://jsbin.com
Released under the MIT license: http://jsbin.mit-license.org
-->
<html>
 <head> 
  <meta charset="utf-8"> 
  <style type="text/css">
body {
   padding:0;
   margin:0;
}

.myclass {
   background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   background-repeat:no-repeat;
   width:100vw;
   height:100vw;
   background-size:100% 100%;
}
</style> 
 </head> 
 <body> 
  <div class="myclass">
    Lorem ipsum dolor 
  </div>  
 </body>
</html>

Related Tutorials