jquery - make css background image responsive -
i use image background of class in left side white background. width of class 1368px , image size 392px or height 600px, want fix image in left side of class responsive. set image in left side in responsive page not work correctly because image showing in responsive device in screen size 700px. how solve issue please me. lot
.about-middle { width: 100%; margin: 0px auto; max-width: 1368px; background: url(../images/right-side.jpg) left #fff; overflow: auto; max-height: 603px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
this code this
here js fiddle try request :
styles :
.main { padding:50px 0; position:absolute; top:0; bottom:0; left:0; right:0; background-color : blue; color : white; } .inner { width : 30%; float:right; height:30%; background-color : red; background: url('http://www.w3blender.com/codecanyon/bgstretcher/sample-images/sample-4.jpg') no-repeat scroll left center / 100% 100% rgba(0, 0, 0, 0); color : white; } .fixedpos { width : 200px; float:left; height:200px; background-color : red; background: url('http://www.w3blender.com/codecanyon/bgstretcher/sample-images/sample-4.jpg') no-repeat scroll left center / 100% 100% rgba(0, 0, 0, 0); color : white; }
html :
<div class="main"> main div <br><br><br> <div class="inner"> responsive </div> <div class="fixedpos"> fixed pos </div> </div>
Comments
Post a Comment