CODEWITHSUNDEEP
ioscssbackground-image
Brachamul
Brachamul

Reputation: 1974

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

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 :

enter image description here

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

enter image description here

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

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 ?

Upvotes: 0

Views: 728

Answers (2)

Brachamul
Brachamul

Reputation: 1974

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

Upvotes: 0

Michelle Cantin
Michelle Cantin

Reputation: 573

  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.

  2. 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.

  3. 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>

Upvotes: 1

Related Questions