CODEWITHSUNDEEP
htmlcss
Avicinnian
Avicinnian

Reputation: 1830

Static/fixed background image while page contents scrolls?

I'm trying to follow a guide located here to know avail :(.

Here's a link to my JsFiddle: http://jsfiddle.net/gF7Af/1/

For background; I'm attempting to make it so that the background image stays in the same position while only nested contents of #container scrolls, so that the background image is always shown and doesn't have any white-space (edges) when the contents nested in #container has a combined height larger than #container's.

Any help would be greatly appreciated!

Thanks!

Upvotes: 2

Views: 9829

Answers (2)

sandeep
sandeep

Reputation: 92863

write background-attachment instead of background-position Like this:

body {
    width: 1000px;
    background: url(http://www.tropicalparadise.net/images/dest/mauritius1.jpg) top right no-repeat;
    background-attachment: fixed;
}

Check this http://jsfiddle.net/gF7Af/3/

Upvotes: 3

leopic
leopic

Reputation: 3012

Try this http://jsfiddle.net/gF7Af/2/

I moved 'fixed' into the bg declaration and it seems to works for me.

Upvotes: 2

Related Questions