How to set body background image as cover for ios devices

Question

I have a div with background image and i set background-size:cover to make full width and height background image. but its not working in ios devices how can i set it for ios devices please help me

thanks

Try `-webkit-background-size: cover; -webkit-background-size: 100%;`. — Vucko, Nov 05 '13 at 07:49

score 1 · Accepted Answer · answered Nov 05 '13 at 07:50

1

It should be background-size: cover; and not background-image. Also, you should be using browser prefixes as the property was released under CSS3 Specification¹..

body {
   background-image: url(#);
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
}

^1. Browser Support

answered Nov 05 '13 at 07:50

Mr. Alien

153,751
34
298
278

@user2894216 I don't see any reason for not working, also, if you are expecting it to be responsive than you are wrong – Mr. Alien Nov 05 '13 at 09:39
how can i make it responsive – user2894216 Nov 05 '13 at 16:22
@user2894216 either use media queries and change dimensions, u n also try `background-size: 100% 100%;` but no fluid responsiveness – Mr. Alien Nov 05 '13 at 16:40

jpostdesign · Answer 2 · 2014-01-10T04:49:07.827

edit - Updated Fiddle

I had a similar problem. I got my solution by setting a scroll attribute for background. Also be sure to set the parent container to 100% height and width. AdrianS has the right point for aiming at html to set 100% height and 100% width.

In the following code, I have a header class for the background image. Adapt it as you need.

Check out a fiddle at http://jsfiddle.net/Bavc_Am/7L3gD/5/

Upvote if helpful please, I'm new here.

html,
body {
  height: 100%;
  width: 100%;
}

/* Full Page Image Header Area */

.header {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  background: url(http://placehold.it/800x800.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


/* Responsive */

@media (max-width: 768px) {

  .header {
    background: url(http://placehold.it/800x800.png) no-repeat center center scroll; 
  }
}

score 1 · Answer 3 · edited May 23 '17 at 12:06

User mkubilayk posted the solution the really worked for me here. The lifesaver whas the property below:

background-attachment: scroll;

Quoting:

I have had a similar issue recently and realised that it's not due to background-size:cover but background-attachment:fixed.

I solved the issue by using a media query for iPhone and setting background-attachment property to scroll.

.cover { background-size: cover; background-attachment: fixed; background-position: center center;
@media (max-width: @iphone-screen) {
    background-attachment: scroll;
} }

score 0 · Answer 4 · answered Nov 05 '13 at 09:04

The solution I will provide can be seen here. But with a minor change. This method is tested many times and for IE it has IE8+ support. You can see the full browser support in the link that I provided.

html {
  width: 100%;
  height: 100%;
}
body {
  background: #Fallback-color;
  background: url(../images/image.jpg) center top no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/image.jpg',sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/image.jpg', sizingMethod='scale')";
  height: 100%;
}

How to set body background image as cover for ios devices

4 Answers4