/    Sign up×
Community /Pin to ProfileBookmark

CSS Background question

Copy linkTweet thisAlerts:
Aug 20.2011

Hello everybody ?

I have a, perhaps simple, question.

I am trying to have basically 3 parts to my background and when the window is resized instead of cutting just the right side of the background I want it to adjust itself so the left moves also and I can keep a centered background.

I have no idea how much sense that just made so here is an example I’ve found.

[url]http://www.youtube.com/user/collegehumor[/url]

& this is the background

[url]http://i1.ytimg.com/bg/PDXXXJj9nax0fr0Wfc048g/110.jpg[/url]

I want to achieve youtube’s effect when the window is resized. (Keep the background centered)

Any help will be greatly appreciated. ?

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@rtretheweyAug 21.2011 — The effect you want is achieved by setting the background position to 'center' and setting the background color to be the same as the left and right edges of the background image. By setting the background position to center and the left and right margins on the element used as the container for the page content to 'auto' with a fixed width, everything stays centered even if the browser window is resized.
×

Success!

Help @webdev11 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.19,
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,
)...