I want to achieve an effect similar to the background image in Twitter mobile website for iPhone/Android ([screenshot of it](http://i.imgur.com/DJfdfYX.png)).

My solution works when the content fits the screen, but if there is a scroll it breaks. 

This is the CSS I'm using:

```css
.welcome body{
  background: url(http://i.imgur.com/DQ59KbW.jpg) no-repeat top left;
  z-index: -1;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  background-origin: padding-box;
  -webkit-background-origin: padding-box;
  background-size: cover;
  -webkit-background-size: cover;
}

html.welcome, .welcome body{
  height: 100%;
}

```