Backstretch and background-size: cover

Question

I'm currently using CSS for full screen background one my single page website (composed of several DIVs of 1300px height under each other). It works well, the background image is full screen on the visible part of the page, but it doesn't work on ipad. The issue with backstretch is that if I include this code

 <script>
 $("#medias").backstretch("../images/bg-18.jpg");

within my "medias" DIV, the background image covers the full size of my DIV (so 1300 height * width) which is not what I want it to cover the browser window only Many thanks

Example of a DIV with CSS method:

#medias {
    height: 1300px;
    background: #8aba56;
    padding-top: 150px;
    background: url(../images/bg-18.jpg) no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
}

I use MaxImage... much better (aaronvanderzwan.com/maximage) — adaam
@adaam how does maximage compare to backstretch? Why is one better? They both appear to do the same thing. — Chuck Dries

Desmond Mond Desmond Mond · Accepted Answer · 2013-06-16T14:05:55

I ended up using backstretch initially because the css didn't seem to work on ipads. Exactly as you've described. However, oddly enough, after experimenting with the CSS, and changing this:

background-image: url('background.jpg');

to,

background-image: url ('www.imgur.com/background.jpg')

The background worked on the iPad. It seemed that changing the background-image location to a direct url the iPad was able to produce the image. So, try uploading your image to a temporary server (like imgur), and then changing the link in your CSS, to the imgur link.

Strangely enough it worked for me.

Backstretch and background-size: cover

1 Answers