Monday, 29 July 2013

How to use responsive background-images in html5?



<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>responsive background images</title>
<style type="text/css">
   div.wrapp {
                max-width: 800px;
                             }
             
              figure.wrappundr {
                padding-top: 56.25%;  /* 450px/800px = 0.5625 */
             
                background-image: url(body_bg.png);
                background-size: cover;
                -moz-background-size: cover;  /* Firefox 3.6 */
                background-position: center;  /* Internet Explorer 7/8 */
              }
     
    </style>   
</head>

<body>
         <div class="wrapp">
                <figure class="wrappundr"></figure>
              </div>
</body>
</html>