Images set with background-image don't show in iOS

Question

I have this simple html that uses a tiny bit of bootstrap:

<div id="A" class="col-4">
    <div class="img" style="background-image: url(/images/image.jpg);">
</div>
<div id="B" class="col-8">
    *some content*
</div>

And its corresponding CSS:

.img { width: 100%; height: 100%; }

Everything is in this pen : https://codepen.io/anon/pen/EbBGQw

The image correctly displays on the entire height of the parent div on either Chrome or Firefox, either Windows or Android :

However, on iOS devices (tested on iPhone and iPad recent browsers), the images don't show up :

I've done some digging and cleared some potential culprits :

I'm not using position: fixed;
My images aren't too large
I'm not using the background shorthand

What I have found, however, is that entering any text inside the "img" div will make the background-image appear behind the text. The image still won't cover the entire div, but it does appear.

Why is Safari not showing the image properly ? What is the best way to deal with the issue and have the image properly cover its entire div ?

Michelle Cantin · Answer 1 · 2017-12-08T02:41:07.990

1

When you set the height to 100% : The height will only be as large as what is inside the element. If there is nothing inside, the height will be 0. If there is a paragraph (as shown here), the height will be as large as the paragraph. I suggest using either pixels, rems or ems instead.
The way you wrote your image style background did not work in chrome either. I put it in the img class instead and it worked.
If you don't want to add the background image to your img class, you could do this instead:
```
<div class="img" style="background-image: url('image.jpg')"><p>Testing</p></div>
```

.img {
  width: 100%;
  height: 100%;
  background-image: url("image.jpg");
}

<div class="img"><p>Testing</p></div>

edited Dec 08 '17 at 02:41

answered Dec 08 '17 at 02:34

Michelle Cantin

583
4
15

Hey, thank you for your answer. I'm editing my question to clarify. The height of 100% should refer to the parent element, not what's inside. The parent element does have height, and so the "img" should use that height, not base itself on its content. What I've currently got does work on Firefox and Chrome. – Brachamul Dec 08 '17 at 10:07
@Brachamul I don't really understand what you are trying to do. Could you post more of your CSS to clarify? For example, I don't know what container, row, col-4, col-8 or A do. – Michelle Cantin Dec 09 '17 at 04:34
I was trying to have the left column be filled with an image for the height of the right column. I fixed it thanks to a suggestion from another StackOverflow question. – Brachamul Dec 09 '17 at 15:51

score 0 · Answer 2 · answered Dec 09 '17 at 15:51

After more digging, and the suggestion from @Michelle Cantin, I found out that the height: 100% from my CSS is ignored by Safari.

In this great answer, a fix is proposed using position: absolute;. I applied relative position to the parent element (#A) and absolute positioning to the child (.img), which fixed the issue.

The image can be seen covering the entire left column for as heigh as the right column goes in this pen : https://codepen.io/anon/pen/bYPzew

Images set with background-image don't show in iOS

2 Answers2