/    Sign up×
Community /Pin to ProfileBookmark

stop the background moving with window resize (i have a url)

Copy linkTweet thisAlerts:
Feb 25.2010

[url]http://gocrossmedia.com.au/corbin/mockup/[/url]
the gradient at the bottom of the page is a div with a repeat-x background-image in it. it is locked to the bottom of the page with :

postion:absolute;
bottom:0px;
left:0px;

but as you can tell there is an ugly effect when the window is resized, how can i make the gradient not move up when the window is resized?

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@cfajohnsonFeb 25.2010 — [indent]

If you anchor it to the bottom of the window, then of course it is going to move when the window is resized.

I suspect that what you really want it to prevent it encroaching on the background of the top part of the page.

Why not put a background colour on the part you don't want disturbed?

[/indent]
Copy linkTweet thisAlerts:
@korbbitauthorFeb 25.2010 — yeah that works but what i really want is a way to keep the bottom gradient at a full windows height length from the top of the screen.

something like :

top: 100%

sounds like it should work but it cant.

top: 100%-divHeight;

would be lovely statement if there were such a thing in css
×

Success!

Help @korbbit 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 6.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...