/    Sign up×
Community /Pin to ProfileBookmark

how to scroll content against a static bg?

Hi,

I was wondering if someone could explain to me the basic technique for having the content of a webpage scroll against a body element which does not scroll. Here is an example:
[URL=”http://www.cssbloom.net”]
http://www.cssbloom.net/[/URL]

How do you do that? Is that pure CSS?

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@6StringGeekApr 27.2009 — It is CSS. Here's a basic example:

[CODE]body
{
background-image: url('background-image.gif');
background-repeat: no-repeat;
background-attachment: fixed
}[/CODE]
Copy linkTweet thisAlerts:
@WebJoelApr 28.2009 — Correct. ?

And it can be written 'shorthand' for reduced code-weight, like this:

body

{

background: url('background-image.gif') no-repeat fixed;

}[/QUOTE]


For Accessibility reasons, a 'background-color' should be stated by default, so it night look like this:

body

{

background: [B]#fff[/B] url('background-image.gif') no-repeat fixed;

}[/QUOTE]
giving you a default background-color of "[B]white[/B]" with background-image of "background-image.gif" that is non-repeating and 'fixed' in place. Since the image is 'fixed', its 'position' can be implicitly stated too:

body

{

background: url('background-image.gif') no-repeat [B]center[/B] fixed;

}[/QUOTE]


You can replace "[B]center[/B]" (which means "[B]center center[/B]" both [B]horizontally[/B] & [B]vertically[/B]) but also by percents, pixels, etc. in [I]x[/I] and [I]y[/I] coordinates.

If you want the fixed background-image to be in the upper right-hand quadrant, you can do that using the [B]x/y[/B] co-ordinates ?
×

Success!

Help @johnnyblotter spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...