CODEWITHSUNDEEP
htmlcss
gberger
gberger

Reputation: 2863

Background image covering all of the content

I want to achieve an effect similar to the background image in Twitter mobile website for iPhone/Android (screenshot of it).

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

This is the CSS I'm using:

.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%;
}

Upvotes: 1

Views: 2902

Answers (2)

Glitch Desire
Glitch Desire

Reputation: 15023

You need to set your background not to scroll:

background-attachment: fixed;

Re: your comment, change your CSS to:

html { 
    background: url(http://i.imgur.com/DQ59KbW.jpg) no-repeat center center fixed; 
    -o-background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

This will be full-screen, at any size, and not scroll.

Only caveat is it won't work with non-CSS3 browsers (should work in any Chrome, Firefox 3.6+, IE8+ and Opera 10+).

Upvotes: 1

hannenz
hannenz

Reputation: 513

What behaviour do you intend? If the content is larger than the background image is tall, then it simply won't work out. You could add a position:fixed to the body if that is what you want to achieve.

Upvotes: 0

Related Questions