CSS background cover

Question

I have a full screen background accomplished perfectly in CSS using:

body {
  background-image: url('../images/backgrounds/<image>.jpg');
  background-size: cover;
  float:left;
  overflow: hidden
  }

Although when looking at this on mobile, iOs & IE Windows Mobile, the background is tiled instead of full screen. I get I may need to have a different CSS file for the mobile OSs out there but am unsure of what exactly the problem is, how do I full screen an image for mobile?

score 1 · Answer 1 · answered Sep 23 '13 at 13:06

Change your background-image to this:

background: url('../images/backgrounds/<image>.jpg') no-repeat center center fixed;

When this won't work, please take a look at the article by CSS-Tricks about a prefect full page background image.

There are only CSS solutions as well as solutions with jQuery

score 0 · Answer 2 · answered Sep 23 '13 at 12:55

0

That might be a resolution problem, get screen size variables and strech the image to fill the screen.

And try it with adding background-repeat:no-repeat;

answered Sep 23 '13 at 12:55

Sarge

388
1
4
22

score 0 · Answer 3 · answered Sep 23 '13 at 12:57

You should use a cover that repeats x-y wise. So it is really a trick with a background image and colors in the css that corespond..

    body {
     background: url("images/bg3.jpg") repeat-x scroll 0 0 #EF9360;
    }

So if your css background image is blue on the top you should use a blue background...

Read more here http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_gradient1

CSS background cover

3 Answers3