0

I have a background image setup in my css and everything seems to display fine on the desktop but when I try viewing on my ipad or iphone 6 plus I don't get the image at all (not even an off-center image).

How can I be sure my images resize, center and appear on mobile?

.landpage-img {
    background: url('../img/bg-neon-01-2000x1333.jpg') center center no-repeat fixed !important;
    height: 1333px;
    background-size: cover;
}

@media only screen and (max-width: 1024px) {
    .landpage-img {
        background: url('../img/bg-neon-01-1024x671.jpg') 50% 0 no-repeat center center fixed !important;
        height: 671px;
        background-size: cover;
    }
}
@media only screen and (max-width: 991px) {
    .landpage-img {
       background: url('../img/bg-neon-01--991x649.jpg') 50% 80% center center no-repeat fixed;
       height: 649px;
     background-size: cover;
           }
}
@media only screen and (min-width: 0px) and (max-width: 767px) {
    .landpage-img {
        background: url('../img/bg-neon-01--767x502.jpg') 50% 80% no-repeat fixed !important;
        height: 767px;
        background-size: cover;
    }
}
NoobEditor
  • 15,563
  • 19
  • 81
  • 112
Rogue33
  • 43
  • 1
  • 6
  • did you have an external host that i can open from iphone? – Kasnady Feb 22 '18 at 04:38
  • 1
    Possible duplicate of https://stackoverflow.com/questions/23586530/css-background-image-not-displaying-on-mobile – Athul Nath Feb 22 '18 at 04:43
  • I'm using Bootstrap 4. The iPhone displays nothing while the iPad displays it at a non-centered position. Is there a limitation on the amount of pixels the iPhone can handle. I've scaled the images down per each media query so the file size gets smaller. Looks great on desktop but zilch for a background-image on my on iPhone. – Rogue33 Feb 22 '18 at 05:27
  • Remove `background-attachment:fixed` for mobile and tablet devices. [Fixed-backgrounds have huge repaint cost and decimate scrolling performance, which is, I believe, why it was disabled.](https://stackoverflow.com/a/23420490/3239951) – Ganesh Yadav Feb 22 '18 at 06:15
  • I removed Fixed from just like locateganesh stated and it works perfectly on my iPhone (well almost perfectly I have to resize some of the font's for the landing page but that's something different). Awesome Dude! Thanks for the help! – Rogue33 Feb 22 '18 at 15:49

1 Answers1

0

I am not sure what image you are working with but this should fix the problem (no media queries needed).

body {
background-image: url(/example/example.jpg);
background-repeat: no-repeat;
background-size: cover;

}

Also, see https://www.w3schools.com/css/css_background.asp

jaden
  • 43
  • 8