Responsive background image moves to the left after certain size - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

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

Description

Responsive background image moves to the left after certain size

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.header_area {<!-- w  w w . j  a v  a  2s  .  c o m-->
   background-color:Chartreuse;
   padding-top:11%;
   height:201px;
   background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   background-repeat:no-repeat;
   background-position:center center;
   background-size:100%;
   -moz-background-size:100%;
}

.header_area h1 {
   color:yellow;
   font-size:35px;
   display:inline-block;
   -webkit-transform:skewX(-16deg);
   -moz-transform:skewX(-16deg);
   -ms-transform:skewX(-16deg);
   -o-transform:skewX(-16deg);
   transform:skewX(-16deg);
}

.header_area h2 {
   color:blue;
   font-size:23px;
   display:block;
   -webkit-transform:skewX(-16deg);
   -moz-transform:skewX(-16deg);
   -ms-transform:skewX(-16deg);
   -o-transform:skewX(-16deg);
   transform:skewX(-16deg);
}

.header_area figcaption {
   margin-left:31px;
   margin-top:-21px;
}
</style> 
 </head> 
 <body> 
  <header> 
   <figure class="header_area"> 
    <figcaption> 
     <h1>Lorem</h1> 
     <h2>Lorem ips</h2> 
     <h2>Lorem</h2> 
    </figcaption> 
   </figure> 
  </header>  
 </body>
</html>

Related Tutorials