Background Images not showing up in IOS devices

Question

I have several divs with background images, but none are showing up in any ios device (iphone + ipad). It works everywhere else.

I've cut the sizes of the photo down to be 635 x 635. I'm not sure if this is an issue with the images or with the css. Unfortunately I can't post links to the actual images. But here is a sample of the code I have:

The url to the image is generated by Thumbor.

.section {
  position: relative;
  width: 100%;
  min-height: 100%;
  padding-left: 10%;
  display: block;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: auto;
  padding-left: 0% !important;
}
.caption {
  margin: 5%;
}

<section class="section" id="image_text3" style="background: url(//placehold.it/635/635) no-repeat fixed top;">
  <div class="caption">
    <p>caption</p>
  </div>
</section>

there is no space between text3"style= you should have text3" style= — mlegg, Sep 30 '16 at 00:21
Okay, thank you. This method did not solve the issue, unfortunately. — auto, Sep 30 '16 at 01:37

score 0 · Answer 1 · answered Sep 30 '16 at 05:59

0

I would like to contribute my part to this question if at all I give you the exact solution.

http://caniuse.com/#search=background-image tells that iOS has some issues with background-size: cover property.

answered Sep 30 '16 at 05:59

user3260487

75
10

score 0 · Answer 2 · answered Aug 02 '17 at 15:33

0

I just answered a similar question to this. Check out the answer to this question. I also did a blogpost on it that explains this with examples.

answered Aug 02 '17 at 15:33

thomas jaunism

805
2
10
31

Background Images not showing up in IOS devices

2 Answers2