CODEWITHSUNDEEP
htmlcssbrowserbackgroundresolution
Liam David Hodnett
Liam David Hodnett

Reputation: 27

Make a div fit all screen sizes

I am creating a full size photo slideshow, I don't want to use images as they will be easier to copy, so instead I am using divs with background urls, however I am having trouble getting these to fit all screen resolutions. Naturally the smaller the screen the more zoomed in the photos appear. I have posted my code below.

<!DOCTYPE html>
<head>

<style>

html,body{
height:100%;
overflow-y:hidden;
margin:0px; padding:0px;
}

.bxslider { 
position:absolute; 
background:red; 
height:1000px; 
overflow-y: scroll; 
margin:0; padding:0;
}

.red {     
background:red url(http://chefpaulcrowe.com/img/background-example.jpg) no-repeat center     center; width:100%; height:100%; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 
}
.green {     
background:green url(http://chefpaulcrowe.com/img/background-example.jpg) no-repeat center center;  width:100%; height:100%; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 
}
.blue {     
background:blue url(http://chefpaulcrowe.com/img/background-example.jpg) no-repeat center center; width:100%; height:100%; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 
}

#bx-pager-wrapper { width:100%;  background:black; position:absolute; bottom:0; padding:30px 0 30px 0; }
#bx-pager { position:relative; float:right; margin-right:100px; }
#bx-pager img { padding:0 30px 0 0; }

</style>

<script src="http://bxslider.com/js/jquery.min.js"></script>

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script src="http://bxslider.com/js/scripts.js"></script>

<script type="text/javascript">

  var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-36499930-1']);
 _gaq.push(['_trackPageview']);

(function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-    analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

</head>

<body>

<script type="text/javascript">
  $(document).ready(function(){

$('.bxslider').bxSlider({
  pagerCustom: '#bx-pager'
});
  });
</script>


<ul class="bxslider">
  <li class="red"></li>
  <li class="green"></li>
  <li class="blue"></li>
</ul>


<div id="bx-pager-wrapper">
  <div id="bx-pager">
    <a data-slide-index="0" href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
    <a data-slide-index="1" href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
    <a data-slide-index="2" href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
  </div>

</body>

</html>

Upvotes: 0

Views: 10786

Answers (2)

Mike Legacy
Mike Legacy

Reputation: 1066

I would greatly recommend against this.

This limits you, and doesn't protect your images. I can inspect your css, copy the path on your site, and still access the image anyways. If you did this with IMG tags (my recommended way), you can turn off right-click on your website with javascript and that would help protect your images. You can do that like this:

How do I disable right click on my web page?

If you insist doing it this way (the wrong way), here it goes.

With a gallery, you don't want cover. At a screen size like on iPhone, half the image will be getting cut off because, by default, cover makes sure the image is covering the ENTIRE viewport, and it keeps the image proportions.

I would think what you want is this: 

.red {
    background: red url(images/background.png) no-repeat;
    background-size: 100% center;
}

This is still going to cut off some of the image if the image is too tall and will leave the background color (red) showing through is the image is not tall enough to fill the screen at whatever width your browser is.

The only way to fully ensure your image will never expand past the height or width of the browser viewport is to do it like this: 

<ul class="bxslider">
    <li class="photo"><img src="image1.png"/></li>
    <li class="photo"><img src="image2.png"/></li>
    <li class="photo"><img src="image3.png"/></li>  
</ul>

And the css would be: 

.photo {
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
}

.photo img {
    width: 100%;
}

Do whatever you want, but you can't have a max-width or a max-height on a background image so the only way to ensure you dont cut off your image, is to do it the second way I recommended, and then just disable right click or protect your images in some other way.

DISCLAIMER: NEITHER WAY WILL PROTECT YOUR IMAGE - Throw a watermark on them if you want them protected that bad.

Just placing the images there as background images is TERRIBLE semantics.

Upvotes: 0

andrei
andrei

Reputation: 2940

try giving a width of 100% to the bxslider and the same for the bg size

http://jsfiddle.net/vuB64/

.bxslider { 
position:absolute; 
background:red; 
height:1000px;
    width:100%;
overflow-y: scroll; 
margin:0; padding:0;
}

.red {     
background:red url(http://chefpaulcrowe.com/img/background-example.jpg) no-repeat center     center; width:100%; height:100%; 
-webkit-background-size: 100%;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%; 
}

Upvotes: 1

Related Questions