CODEWITHSUNDEEP
htmlcssmobile-safari
Dancer
Dancer

Reputation: 17651

Mobile iOS - Fixed background image solution

I know similar issues have been asked several times before but I have trawled through many questions/ answers and cannot find a solution that works for my specific issue.

Basically I have a responsive website which has fixed background images - the images are 1280 x 853 px, they are applied to the html tag via the following css (which is currently a bit of a mess due to trying several solutions) - 

html {
  background: url(/content/images/bg_lrg.jpg) no-repeat top center fixed;
  -webkit-background-size: 1024px 768px;
  background-attachment: fixed;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

My idea was to apply a background size - if this worked I'd use media queries to apply relevant sizes for ipad / iphone / other.

the image currently appears huge in iOS devices - as it is constraining itself to the height of the document rather than the viewport - I know there are many issues with fixed backgrounds in mobile Ios - does anyone have a workaround solution? where my image could cosntain to viewport width not document height?

Upvotes: 2

Views: 1550

Answers (1)

Termato
Termato

Reputation: 1610

First Solution, have you tried setting your ViewPort? In the head of your HTML, you can include this:

<meta name="viewport" content="width=device-width, initial-scale=1">

I would first try that. You can even specify the width for iPhones. This is the best solution at first in order to get your device to display the size of the image properly on your phone. Here is a link with a quick description of what you can do with ViewPorts:

Many sites set their viewport to "width=320, initial-scale=1" to fit precisely onto the iPhone display in portrait mode. Using the viewport meta tag to control layout on mobile browsers

Secondary Solution:

If that doesn't work, I created a modified this custom solution before these new feature came out. I modified this function to make the background of a website always fill the background regardless of screen size:

JavaScript using JQuery:

//Resize background image function
$(function () {
    var $window = $(window);
    var width = $window.width();
    var height = $window.height();

setInterval(function () {
    //Checks for screen resize every hundreth of a second and resizes elements based on that new screen size
    if ((width != $window.width()) || (height != $window.height())) {
        //resets the variables to prevent glitching
        width = $window.width();
        height = $window.height();

        //calls resizing functions
        resizeBg();
    }
}, 100);
});

And it calls this function:

function resizeBg() {
var theWindow = $(window),
$bg = $("#bgVideo"),
aspectRatio = 1920 / 1080; //-- This is the aspect ratio (width / height) of the background image. if the video changes size.

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

In my CSS I have the following classes:

.bgwidth {
    width: 100%;
}

.bgheight {
    height: 100%;
}

And on your HTML, you want to have something like this:

 <video id="bgVideo".....

OR

<img id="bgVideo"...

and I have the following CSS for my background ID:

#bgVideo {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

I hope this helps.

Upvotes: 1

Related Questions