CODEWITHSUNDEEP
htmlcssmobilebackground
Jonlee
Jonlee

Reputation: 51

CSS background cover

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?

Upvotes: 4

Views: 2802

Answers (3)

Michael Schmidt
Michael Schmidt

Reputation: 9230

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

Upvotes: 1

Cisum Inas
Cisum Inas

Reputation: 12990

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

Upvotes: 0

Sarge
Sarge

Reputation: 408

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;

Upvotes: 0

Related Questions