How to fix scrolling issues with liquid layout image 100% width and height?
I am using a liquid layout on my site. The background is a an image (
slideshow ) and it works how I want. The photo stretches and resizes with
the size of the browser.
However, I just noticed that when I move my browser window as thin or
narrow as it goes, the image is still there but when I scroll to the right
the image cuts off into the background. But full size works fine.
basically I want it to be 100% width and height at all times and never
scroll horizontally or ever exposing the body.
Please let me know what else you need to know to help. Here is the html
and css. thanks
#revolver {
background-color:#ccc;
width:100%;
min-height:100%;
z-index:10001;
}
.revolver-slide {
width:100%;
min-height:100%;
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.revolver-slide img {
width:100%;
min-height:100%;
}
.page-section {
width:100%;
height:100%;
margin:0px auto 0px auto;
}
html,body {
height:100%;
}
<div class="page-section clear">
<!-- 100% width -->
<div id="revolver">
<div class="revolver-slide" style="background-image:url('<?php
bloginfo('template_directory');?>/img/slides/slide-6.jpg');"></div>
<div class="revolver-slide" style="background-image:url('<?php
bloginfo('template_directory');?>/img/slides/slide-2.jpg');"></div>
<div class="revolver-slide" style="background-image:url('<?php
bloginfo('template_directory');?>/img/slides/slide-8.jpg');"></div>
<div class="revolver-slide" style="background-image:url('<?php
bloginfo('template_directory');?>/img/slides/slide-11.jpg');"></div>
<div class="revolver-slide" style="background-image:url('<?php
bloginfo('template_directory');?>/img/slides/slide-7.jpg');"></div>
<div class="revolver-slide" style="background-image:url('<?php
bloginfo('template_directory');?>/img/slides/slide-4.jpg');"></div>
<div class="revolver-slide" style="background-image:url('<?php
bloginfo('template_directory');?>/img/slides/slide-9.jpg');"></div>
</div>
</div>
No comments:
Post a Comment