Home Image not showing iPhone (Ok on all devices including Android)
Reply: 1

Image not showing iPhone (Ok on all devices including Android)

miintea
1#
miintea Published in 2018-01-13 00:36:48Z

I looked through multiple posts on this but it doesn't seem applicable to my case. I've 2 background images that are not displaying on iPhone (only), it works fine for desktop and android

I have added this to index.html

meta name="viewport" content="width=device-width, initial-scale=1.0"

In CSS they are both slightly coded differently, image1

.jumbotron {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
  background-size: cover;
  background-position: center 15%;
  height: 100vh;
  background-attachment: fixed;
  background-repeat: no-repeat;
  margin-left: -20px;
  margin-right: -20px;
  border-radius: 1px;
  margin-bottom: 0rem;
}

And image2

.testimonials {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)), url(img/testimonials.jpg);
  background-size: cover;
  background-position: right;
  color: #fff;
  background-attachment: fixed;
  margin: 0px;
}

In terms of responsive sizing, I'll only adjusted for jumbotron's other elements (eg h1, button) but nothing specific for testimonials

Can anyone shed some light please? Thank you!

Bhuwan Bhatt
2#
Bhuwan Bhatt Reply to 2018-01-16 06:41:41Z

This is because iOS does not support background-attachment: fixed; fully. I will suggest to use background-attachment: scroll; for mobile devices using media query.

@media (max-width:768px) {
  .jumbotron,
  .testimonials {
    background-attachment: scroll;
  }
}

You can check here for support

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.299687 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO