0

I am having some trouble with this and haven't found a solution. The solutions I find are for background-size:cover; when applying to a whole page, whereas I am using this on a specific div.

First, the site is http://www.sexypizzamarketing.com.

If you check this site, there is a DIV with a background-size:cover for an image, and here is the css:

#div3 {
    margin-top:40px;
    background-image:url("images/Desert.jpg");
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:100%;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-color:#914211;
    color:#201E1E;
    background-color:#A4FFEE;
    height:600px;
    }

so as you scroll down, this 600px div moves over a fixed image. all of the research I've done is talking about how this background-position:fixed does not work on mobile. but when ive tested this on my android phone and a windows phone (and all browsers on PC) this has worked.

so really, unless you have an iphone, you won't be able to see this problem. ive used testmobile.me to test iphone, and it does not show up there. This is driving me crazy, because until now, I've been editing the live site, then asking someone to screenshot the site and send it to me... yea. 1. does any one know how to solve this?

So next, I decided to scrap this on iphones, would get rid of it for iphones. so I included this in css, 

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
   /* CSS overrides for mobile here */

    #div3   {
        background-color:black;
        height:500px;
        background-image:url("images/Background.jpg");

        }

and this isn't hasn't solved it either. **EDIT. this makes sense, but I didnt realize it. I put the @media only css to specify device width for a specific div (div3) above the regular div3 css, so it wasn't overriding. I moved it to the bottom of the section, allowing the @media to override the div3 css, so this solved that. A few things- this targets all media devices max width:700px, not just iphones. so i will look into that (because the site worked fine on windows and android phone)

As soon as I get the spare iphone and figure out how to connect it to localhost, then I will try the suggestions from alexander, because I don't want to risk messing something up by editing the live site through cpanel.

I'll be getting an old iphone for testing purposes as well.

but any suggestions, or if you can point me in the right direction, I'll make you some shrimp tacos or something.

daryl
  • 29
  • 5
  • possible duplicate of [Fixed background image with ios7](http://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7) – Alexander O'Mara Jan 04 '15 at 21:33
  • Also: [How to replicate background-attachment fixed on iOS](https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios) – Alexander O'Mara Jan 04 '15 at 21:34

0 Answers0