Css gradient help

fez

fez

fez

Caporegime
Joined
22 Aug 2008
Posts
28,058
Location
Tunbridge Wells
Right, never really had to do this before on a site but the client has sent me a design which includes a background gradient which covers the entire content area with a different grad for the body bg.

This is all fine if the gradient goes left to right as the width is fixed however this is a vertical gradient and needs to be able to support different height pages without looking gash.

What is the general wisdom to achieve this?

Any help would be massively appreciated.
 
Cheers matey, its not quite as easy as that though. As far as the internet seems to suggest, what I am after is not possible without using js.

I was after a bg that scales as such so that it always looks the same regardless of height rather than just having it display either part of the grad when the content is small or a solid color when it is too large.

Realise now that I may have been after some voodoo.
 
Can you show us what you mean? I'm having trouble understanding exactly what you are after, so a mock of what you want would be best.
 
Ah, so essentially you want a background gradient that dynamically scales depending on resolution and browser window size?


Have yet to see such a thing.
 
No, judging from his second point he is looking for a scalable gradient. Probably viewport dependent so that if you resized a gradient from say, big to small, it wouldnt matter, it would still go fully from colour x to colour y.. where as if you use repeat and resize a viewport it does cut it off at some point..

Although that said, I've never really seen a design "need" to have a scalable grad.

edit: Skippi you bast!
 
Think you can do this in CSS3, but obviously that's no good for IE.

*ninja*
Yup, just tested, works in CSS3 enabled browsers.

Code: 
<html>

<head>
	<style type="text/css">
		BODY {
			height: 100%;
			background: -moz-linear-gradient(
				center bottom,
				rgb(5,64,253) 15%,
				rgb(39,64,133) 58%,
				rgb(44,53,74) 79%
			)
		}
	</style>
</head>

<body>
	
</body>

</html>
 
Last edited:
Cheers guys, all your ideas are much appreciated. As mentioned I was looking for some sort of magic bullet that would allow the bg to stretch as it were.

I have taken a little look at CSS3 and it will be a godsend when it properly hits and we can use it without consideration of older browsers. Until then I have just done the standard and made it fade to the bg colour.
 
You must log in or register to reply here.
Back
Top Bottom