CSS Gradient Background?

April 11, 2011 1:41 PM

CSS Filter: I am trying to create a cross-browser gradient background using only CSS. Is this possible?

I am trying to create a cross-browser gradient background for a website I am making. Not for a button or header or some other element of the site, but for the entire background of the page. I am looking to make it go from dark brown at the bottom to a lighter shade of brown at the top.

There are many websites out there that produce "cross-browser gradient backgrounds" but unfortunately they all seem to suffer from the same bug when utilized for the background of an entire page. The bug is this: the gradient is (apparently) only applied to the initial size of the browser viewport. In other words, if your browser window is set at a size smaller than the page and you need to scroll down, everything "below the fold" has reverted to the startcolor of the gradient which, as you might imagine, is both visually ugly & interruptive.

Re-sizing the window manually works fine - the gradient remains applied to the entirety of the viewport. Scrolling seem to be the main issue.

So, does anyone know a fix for this? Or perhaps know of a site that achieves this? Or am I just missing something that's right in front of my face?

Here are the websites I've already checked out. They are all great, but none generate code that solves the problem described above.

- Colorzilla
- Damian Galarza
- Remy Korrelboom
- Display Inline
- Web Designer Wall
- Pure Mango
- CSS Tricks

(If you would like to see the website in question, I've put a link to it in my profile, right at the top.)

posted by jammy to Computers & Internet (11 answers total)

I haven't done a lot of CSS3 stuff here, but it sounds like you're using the body class to assign the gradient parameters to, and that is at least apparently dependent on the viewport dimensions. So couldn't you introduce an element into the page that is the height of your page, and apply the gradient attributes to that? I would imagine that would override the viewport dimensions.

Also, are you new to CSS or looking for an advanced CSS3 solution? Because another light-weight albeit "manual" solution is to use photoshop to create a thin vertical slice of your gradient (1 or 2 pixels, even), insert it as a background image, and have it repeat along the x-axis.
posted by phaedon at 2:07 PM on April 11, 2011

the only way I know of is to use background-size
posted by mce at 2:12 PM on April 11, 2011

Response by poster: thanks for the ideas, phaedon. you are correct that i am using the body class to assign the gradient & maybe that's the problem? i'll experiment with your suggestion concerning an element the height of the page. but now i also wonder what would happen if i assigned a gradient to a div that was placed before the body?

also, i'm no expert at CSS but i have been using it for a little while now and feel pretty familiar with is. i am aware of the image solution and have already made another version of the same page that utilizes one - and it looks great. but i was still wondering if there was a solution that used only CSS (and not CSS3, not yet at least, due to lack of complete support).
posted by jammy at 2:18 PM on April 11, 2011

I've always used the method that phaedon mentioned--create a very tall 1px image and tile it along the x-axis.

For example, here I'm using the background color of ask MeFi) and then applying an image that repeats along x.
body {background: #426746 url(images/background_gradient.jpg) repeat-x;}

Even a 2500px tall image isn't very large sizewise and it looks fine. If your page is longer than that it will just be the background color.

ThinkGeek employs something like this but they have an an awesome modification--they have a top and bottom half to their gradient, and then the "fancywrapper" div provides another background image on top of that. Scroll down the page enough and the robots disappear into the background color, but there's a new element that pops out instead. Done entirely with the background colors, very slick.
posted by fifteen schnitzengruben is my limit at 2:20 PM on April 11, 2011

Response by poster: thanks, mce, but unless i'm misunderstanding it, that does seem to be a feature specific to both CSS3 as well to images. also, it only has limited cross-browser support.
posted by jammy at 2:21 PM on April 11, 2011

I usually do a background image, 1px wide and very tall, and repeated across the X axis. I also set the background color to the final color of my gradient, so I can handle folks w/tall monitors.

An alternative approach would be to use javascript to get the window size, and pull an appropriately sized background tile. This would probably require some sort of image generator on your server (and one would hope it would cache common sizes). Shouldn't be too hard to whip up in an imagemagick shell script, though.
posted by jenkinsEar at 2:31 PM on April 11, 2011

Response by poster: hmmm... i guess i should have said: "I am trying to create a cross-browser gradient background using only CSS (i.e. no images)" - my fault.

i do know how to make gradient backgrounds using images. so, any ideas on how to make it happen only using CSS without utilizing an image?

p.s. fifteen schnitzengruben is my limit: that ThinkGeek background is very cool & i've never seen the like before. will definitely be poking into their code soon. thanks!
posted by jammy at 4:05 PM on April 11, 2011

Best answer: The solutions mentioned so far are good, but if you want to generate gradients purely in CSS, short of using images, you do have to use CSS3 (with a fallback for IE). I'm assuming you're after something like this?

body { background: #f0b7a1; /* old browsers */
background: -moz-linear-gradient(top, #f0b7a1 0%, #bf6e4e 37%, #8c3310 68%, #752201 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0b7a1), color-stop(37%,#bf6e4e), color-stop(68%,#8c3310), color-stop(100%,#752201)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#752201',GradientType=0 ); /* ie */ }

I tend to use ColorZilla for generating simple linear gradients like this. (If I may toot my own self-link horn for a moment - as this has been an interest of mine over the last few days - it is possible to make gradients that are a lot more complex). I'm not sure what is causing your issue with the gradient stopping at the bottom of the browser... I don't see the effect you describe when playing around with the CSS of your site using Chrome Developer Tools or Firebug in Firefox. You don't appear to be using the standard trick of setting the min-height of the body:

html, body { min-height: 100%; }

... which may help.
posted by Bora Horza Gobuchul at 4:14 PM on April 11, 2011 [1 favorite]

I can pretty strongly recommend CSS3 PIE for this. It allows you to use normal CSS3 syntax to create the gradient, and then it magically makes it work in IE. The magic it uses is VML (Microsoft's version of SVG, basically), which has some basic support for gradients. This will also allow you to use rounded corners and other CSS3-y things as well. It is technically javascript, but it's packaged up as an IE behavior, which other browsers will simply ignore. I'm not sure if this is really the right solution for a full page gradient, but I would look into it.

That being said, I looked at the site in your profile and don't see the problem you describe. I resized my browser to very small, and scrolled down, and watched as the color goes from an orange-ish to a brown. I tested in Chrome and IE8 and IE7 and saw similar things in all of them.
posted by The Eponymous Pseudonymous Rex at 9:44 PM on April 11, 2011

Response by poster: Bora Horza Gobuchul, you are my hero!

{ min-height: 100%; }

was the missing puzzle piece. thank you! thank you!

p.s. your experiments with gradients are way cool. thank you for linking to them.
posted by jammy at 5:25 AM on April 12, 2011

Response by poster: That being said, I looked at the site in your profile and don't see the problem you describe. I resized my browser to very small, and scrolled down, and watched as the color goes from an orange-ish to a brown. I tested in Chrome and IE8 and IE7 and saw similar things in all of them.

this is because i added the min-height property last night to the style sheet. i should have mentioned it. the thing is, i don't have access to a Windows machine here at home & wanted to test it there and make sure it was working before i replied again.

still, when i saw that you had looked at it in IE7 & IE8 and it was working i knew it was all set. so thank you, The Eponymous Pseudonymous Rex. i appreciate it.

thanks everyone! this is one of my most satisfying AskMe questions ever: i got the answer i needed and learned a bunch of new cool things as well.
posted by jammy at 5:31 AM on April 12, 2011