Reputation: 489

Background image not showing on iPad and iPhone

I want to create a section with a background covering it in a mobile web page, so I was using the following CSS code:

#section1{
    background: url("background1.png") auto 749px;
    height: 749px;
}

The background is showing correctly on Android (Chrome, Firefox ...), but it is not showing at all on iPhone or iPad (Safari, Chrome iOS ...). I have tried to set these properties using jQuery when the DOM is ready, but no luck. I read that the size might be a problem, but the image is about 700kB (1124x749px) so it should accomplish the Safari Web Content Guide rules. Which is the problem?

Upvotes: 13

Answers (16)

Asadullah abbasi

Reputation: 1

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("/Images/taxibg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

this worked for me on both android and ios

Upvotes: 0

Harshit Joshi

Reputation: 21

background-attachment: fixed; is not supported by IOS.

You can fix this by keeping the image in the div and positioning the div.

Hope this will work.

Upvotes: 2

Sajjad Hossain Sagor

Reputation: 518

It's an old issue, i would like to share my solution here. iOS bigger image than the dimension ignores rendering, please use appropriate use size, not the css height/width. The actual image should not be more than 150% larger in size than the rendering viewpoint.

Upvotes: 0

Fins

Reputation: 15

I tried resizing my background image, made it way too small to test the theory, but it still wouldn’t show on any browser on the iPad (and presumably an iPhone). Tried other solutions that are listed here – still no good. Then I noticed that the element had inherited display: table;. Added display: block; to override that and the background image now displays on all divices that I've tested it on.

Upvotes: 0

Christopher

Reputation: 2316

I don't have a real solution/reason for my similar issue but my background-image PNG image simply wouldn't show up until I moved it to a new folder in my (Cordova) iPad app. I literally moved it from /css/images/sweden/myimage.png to /css/images/sv/myimage.png and it started working. The other odd thing is that ALL other images in the original folder work fine (as background-image). Super strange. If I find the true reason/fix I'll report back.

Upvotes: 0

chovy

Reputation: 75814

I had to set input { opacity: 0; } for my input + span {} icon to show up.

Upvotes: 0

Arpita

Reputation: 11

Alternatively, img src works on all browsers. It adds the Background Images acc to devices resolution.

<div class="download">
  <picture>
    <source srcset="/images/ios-device-mobile-v2.png" media="(max-width:450px)"/>
     <source srcset="/images/ios-device-mobile-v2.png" media="(min-width: 600px)"/>
    <img src="/images/ios-device.png" class="imgright">
  </picture>
</div>

This piece of code is tested on iPhone Safari, Android Chrome and web Safari. Hopefully, This will help.

Upvotes: 1

Rizwan Akram

Reputation: 230

Background image disappears on the IOS Browser (iPhone/iPad). This is the code i used:

/*CSS*/
.bg-image {
    background: url([URL]) center/cover no-repeat;
}

Upvotes: 1

insertusernamehere

Reputation: 23600

There's a problem with your CSS rule:

Your using the shorthand notation in which the background-size-property comes after the background-position-property and it must be separated by a /.

What you're trying to do is to set the position, but it will fail as auto is not a valid value for it.

To get it to work in shorthand notation it has to look like this:

background: url([URL]) 0 0 / auto 749px;

Also note that there's a value called cover, which may be suitable and more flexible here:

background: url([URL]) 0 0 / cover;

The support for background-size in the shorthand notation is also not very broad, as it's supported in Firefox 18+, Chrome 21+, IE9+ and Opera. It is not supported in Safari at all. Regarding this, I would suggest to always use:

background: url("background1.png");
background-size: auto 749px; /* or cover */

Here are a few examples and a demo, to demonstrate that behavior. You'll see that Firefox for example shows every image except the fist one. Safari on the other hand shows only the last.

CSS

section {
    width: 200px;
    height: 100px;
    border: 1px solid grey;
}

#section1 {
    background: url(http://placehold.it/350x150) auto 100px;
}

#section2 {
    background: url(http://placehold.it/350x150) 0 0 / auto 100px;
}

#section3 {
    background: url(http://placehold.it/350x150) 0 0 / cover;
}

#section4 {
    background: url(http://placehold.it/350x150) 0 0;
    background-size: cover;
}

Demo

Try before buy

Further reading

MDN CSS reference "background"
MDN CSS reference "background-size"

<'background-size'>
See background-size. This property must be specified after background-position, separated with the '/' character.

Upvotes: 12

dam1

Reputation: 3672

Add a background-color solved my problem

background-color: #F4F4F2;

Upvotes: 0

L X

Reputation: 21

Reduce the image size if nothing else works -- iOS doesn't like large image sizes on mobile and simply won't display the image if it's too large.

Great fundamentals by @insertusernamehere! No matter what I did I couldn't get my image to show up...until, I went back to basics. The image size was too large and iPhone didn't like loading an image of that size, over 700kbs. So, I reduced it to 32kb and we were in action.

Upvotes: 2

yndolok

Reputation: 5607

My problem was that iOS doesn't support background-attachment: fixed. Removing that line made the image appear.

It looks like there are workarounds for a fixed background image though: How to replicate background-attachment fixed on iOS

Upvotes: 21

josh1978

Reputation: 748

I didn't see anyone specifically say this, but you have to define the width too. Makes since, since I set the background size to "contain" - it has to know what the container's dimensions are.

Once I did, the background rendered as expected.

@media only screen and (max-width:599px) {
  [id=banner] td { width:480px !important; height:223px !important; background:url('image') no-repeat 0 0 !important; }
}

@media only screen and (max-width:479px) {
  [id=banner] td { width:320px !important; height:149px !important; background:url('image') no-repeat 0 0 !important; background-size:contain !important; }
}

Note: The background URL needs to be defined for both breakpoints so that it works for iPhone 5 (iOS7).

Upvotes: 0

Carol McKay

Reputation: 2424

I had an negative text-indent that was throwing my background image off the page, so color:Transparent it is then.

Upvotes: 0

Alexandre Bourlier

Reputation: 4118

I hope this will help someone in despair. In my case, it was the size of the image that was too big, so the iPad just wasn't loading it (and it was right actually).

Diminishing its size and quality solved the loading issue.

Upvotes: 7

Jorge Con Jota

Reputation: 489

The problem was not solved when I tried to use properly the background in shorthand. It works when I split the background property:

#section1{
    background: url("background1.png");
    background-size: auto 749px;
    height: 749px;
}

Upvotes: 6

Background image not showing on iPad and iPhone

Answers (16)

Related Questions