1

I need a fixed background that get the size of the browser, and it stay at that size, so the content will scroll up down, left, right, but the background stay fixed at back. Is this possible to achieve with ipad2?

background: url("....") no-repeat fixed;
background-size: auto;
background-repeat: no-repeat;
background-attachment: fixed;

With this, the background is loaded at right size, but on scrolling it scroll to and the background color is shown.

Cœur
  • 37,241
  • 25
  • 195
  • 267
user2239318
  • 2,578
  • 7
  • 28
  • 50
  • iPad type isn't relevant - it's the iOS version (and as such the Safari version) that matters. As for the issue itself - this should work fine. Are you applying the background to the `body`? – Niels Keurentjes Aug 06 '13 at 15:37
  • the background is applied directly to html tag, so it should be behind everything, is this right? – user2239318 Aug 07 '13 at 07:02

2 Answers2

1

To achieve that, you could use background-size: cover;

I'm not sure I understand the problem. If the goal is to design an iPad 2 specific background you could do something like that with the iPad's resolution in mind i.e. How large is the usable area in iPad Safari

@media screen and (max-width:1024px) {
    body {
        background:url(your-1024x690-image) fixed no-repeat; /*landscape background*/
    }
}

@media screen and (max-width:768px) {
    body {
        background:url(your-768x946-image) fixed no-repeat; /*portrait background*/
    }
}

Haven't tested it, but should do the trick.

Community
  • 1
  • 1
sim0n
  • 11
  • 2
  • Problem is that with a page with a very high height, the background get stretched to that height, but I want it to stay at his real dimension. – user2239318 Aug 07 '13 at 07:01
0

For different browser support..

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
Umarfaruk M
  • 340
  • 4
  • 5
  • 19