bg-image on body & html element (background-att.: fixed;) gets clipped on browser resize

[lorem]

Hi everybody

on this site -> http://bit.ly/hm0ovT i got an tiled background image on the html tag:

html {

background: url(../images/background.jpg) 0px 0px;

background-attachment: fixed;

}

and a non-tiled on the body-tag:

body {

background: url(../images/background-logo.png) no-repeat 0px 0px;

background-attachment: fixed;

background-position: top center;

}

if i resize the browser width (and scroll), the non-tiled background image of the body tag will be clipped/covered by the tiled bg image of the html element – does anyone know why and how to prevent it?

thanks, jan

[jamygolden]

Change this:

body {

background: url(../images/background-logo.png) no-repeat 0px 0px;

background-attachment: fixed;

background-position: top center;

}

to this:

#wrapper {

background: url(../images/background-logo.png) no-repeat 0px 0px;

background-attachment: fixed;

background-position: top center;

}

It should solve the problem.
This is happening because the body element is set to 100% width, and 100% with is the width of the viewport. If the background is repeated it will be fine though.

[lorem]

Hey jamy,

spot on! :) thank you very much

cheers, jan

[Author]

Posts