0

I have found several queries along this line, and they either did not have solutions or their solutions didn't work for me. I have media queries set up, the smallest being max-width (700px), and when I preview the site on my desktop with my browser set to the width of an iPhone, it previews fine. However, when preview on my actual iPhone, it shows only a very small portion of the photo. (In both Safari and Chrome.) I'm unsure about Android devices as I don't have one to test on.

Edit: Full site at http://www.dragonflyav.com

Here's the CSS:

  @media (max-width: 700px) {
    .intro {
        background-image: url("images/backgrounds/fleet-top-770.jpg"); 
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        background-attachment: fixed;
        height: 75vh;
    }

I'm sure I'm missing something simple, I've tried several variations of the above, including ditching each different property individually, with no luck. My HTML meta tag is as follows:

        <meta name="viewport" content="width=device-width" content="initial-scale-1">
mrsjetset
  • 1
  • 3
  • Can you provide the html as well (or link to an existing site.) Also you can do a decent test for Android (and many more) using browser tools like Chrome DevTools (if you haven't tried that yet.) – CreativeCreate Apr 03 '16 at 19:22

1 Answers1

0

You are overrulling the wrong styling. On the desktop styling you are using:

background: url(images/backgrounds/fleet-top-2400.jpg) no-repeat center center fixed;

and on the responsive you are using:

background-image: url("images/backgrounds/fleet-top-770.jpg");

This way you will be seeing the desktop image on top of the responsive image. Using just one background property will solve it for you. So I would personally stick to:

background-image: url(images/backgrounds/fleet-top-2400.jpg) no-repeat center center fixed;
  • I don't think that -image needs to be in there on the last style, but regardless, I changed the media query to the full background shortcut property, and now I have no images showing up on mobile. I have triple checked file names and everything matches so I don't know if I'm better off than before or worse. – mrsjetset Apr 05 '16 at 12:45
  • It works perfectly fine here now? Not sure what your problem is. http://imgur.com/G7JHQza –  Apr 09 '16 at 10:48
  • Well it started working when I took out the background attachment property of fixed. I would prefer that it work with that, but apparently it's not possible. – mrsjetset Apr 10 '16 at 15:07