Using background-size: cover with iOs

Question

I am trying to get background-size: cover; to work on iOS devices, but having no luck at all. Has anyone had any luck doing this?

I turned it off for iPhone using background-attachment: scroll; but wanted it to use the fixed attachment property at larger sizes. Is this possible?

The site is live at http://thomas-rogers.co.uk/sectionCover/index.html

The CSS I am currently using is:

section {
background-position: center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-attachment: fixed;
position: relative;
-ms-behavior: url(backgroundsize.min.htc);
}

@media only screen and (max-width : 480px) {
section {
    background-attachment: scroll;
    } 
}

section.full {
height: 100%;
}

#headerImage {
background-image: url(../images/tkgHeaderImage.jpg);
}

#headerImage2 {
background-image: url(../images/tkgMapImage1.jpg);
}

#headerImage3 {
background-image: url(../images/tkgMapImage2.jpg);
}

#headerImage4 {
background-image: url(../images/tkgMapImage3.jpg);
}

#headerImage5 {
background-image: url(../images/tkgMapImage4.jpg);
}

#headerImage6 {
background-image: url(../images/tkgMapImage5.jpg);
}

#headerImage7 {
background-image: url(../images/tkgMapImage6.jpg);
}

Thanks in advance for any help!

Tom.

`background-size: cover;` DOES function on iOS, only `background-attachment: fixed;` does not. Example here: [link](http://www.jhpremium.at/mobile_default.aspx) — The Conspiracy, Mar 16 '14 at 09:37
@MarkusDerflinger Thanks Markus. So is there a way that I can get background-attachment: scroll; to only be selected on iOS devices? — Tom Rogers, Mar 16 '14 at 10:24
this stackoverflow question should give you an idea how to do it: [link](http://stackoverflow.com/questions/7541490/ios-only-css-file) >> the second answer (JS). — The Conspiracy, Mar 16 '14 at 21:17

Using background-size: cover with iOs

0 Answers0