CODEWITHSUNDEEP
jqueryiphoneioscss
user2499454
user2499454

Reputation: 197

iOS - iPhone CSS background issue on website

I have this site here: http://jamessuske.com/freelance/seasons/

and if you view it on an iPhone or iPad vertically the background ends. If you view it horizontally it will cover the whole screen. My question is, is there away to have the background-image cover the whole screen vertically?

Here is the HTML:

<img src="images/index.png" id="bg" class="bgwidth">

CSS:

#bg { 
    position: fixed; 
    top: 0; 
    left: 0; 
}

.bgwidth { 
    width: 100%; 
}

.bgheight { 
    height: 100%; 
}

and the jQuery:

<script type="text/javascript">
            $(window).load(function() {    

                var theWindow        = $(window),
                    $bg              = $("#bg"),
                    aspectRatio      = $bg.width() / $bg.height();

                function resizeBg() {

                    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                        $bg
                        .removeClass()
                        .addClass('bgheight');
                    } else {
                        $bg
                        .removeClass()
                        .addClass('bgwidth');
                    }

                }

                theWindow.resize(resizeBg).trigger("resize");

            });
        </script>

Can anyone help? Or atleast point me in the right direction?

Upvotes: 0

Views: 580

Answers (1)

feitla
feitla

Reputation: 1334

I would probably stay away from using jquery to do that... try using a CSS only solution such as...

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

Src: http://css-tricks.com/perfect-full-page-background-image/

Upvotes: 1

Related Questions