Member Avatar for turpentyne

I'm not sure if this is just a style-sheet issue, because there's a javascript component. But, what I have is a div set to cover the page, and a background image inside, set to cover.

This works fine on a computer, but I noticed that it wasn't portraying correctly on ipad in landscape mode. (or any phone) The image was far too big, only showing a portion of the picture onscreen. (using a 1024x680 picture)

I added height, changing the image to 1024 x 680, and it resolves the problem - but, of course, in portrait there is now a bunch of empty space at the bottom because the image isn't actually that size.

I can't just set css styles based on portrait/landscape, because there is a javascript randomizing script for what image loads on pageload.

Can anybody think of a solution that reconciles this problem?

right now the script is simply this:

<script>
$(document).ready(function() {

// code for random backgorund image on page load
$("#full-size-background").css("background-image", "url(images/backgrounds/" + Math.floor(Math.random()*3) + ".jpg)");

});
</script>

And the style sheet is simply this:
<style>
#full-size-background {
    z-index:-1;
    background:#000;
    background-color:#000;
    background-image: url('../images/BG1b.jpg'); 
    background-repeat:no-repeat; 
    position:fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    height:150px;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:1;
  }
</style>
  • 2 Contributors
  • 1 Reply
  • 1K Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by LastMitch
Member Avatar for LastMitch

This works fine on a computer, but I noticed that it wasn't portraying correctly on ipad in landscape mode. (or any phone) The image was far too big, only showing a portion of the picture onscreen. (using a 1024x680 picture)

This is more like a CSS issye rather than javascript issue.

Try used media query to set the background image kinda like this:

 @media screen and (max-width: 750px) {
#full-size-background {
z-index:-1;
background:#000;
background-color:#000;
background-image: url('../images/BG1b.jpg');
background-repeat:no-repeat;
position:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
height:150px;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:1;
}}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.