Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Some Help With CSS Backgrounds

emorydunn

emorydunn

macrumors 6502
Original poster
Jun 5, 2006
457
0
Austin Texas
I am currently redesigning my website and had it all but finished when I viewed it on a small monitor. The way I have the site set up I have an image fixed at the bottom of the page, this image serves as the background of the site and has a gradient in it. The problem I am running into is the fact that on smaller monitors the top color of the bg image does not match up with the header image. My question is: Is there any way to go a gradient in CSS?

Here is the link so you can see for your self: http://www.emorydunn.com
If you have a massive screen try resizing your browser window so it is short to see the mismatch.

Any ideas on how to fix this if a CSS gradient is impossible?
 
Good news, and bad news...

There is a way to create gradients using CSS such as this extremely cool site I found which allows you to experiment with the settings and see results.

Example code:

HTML: 
<body style="filter:progid:DXImageTransform.Microsoft.Gradient
(endColorstr='#003366', startColorstr='#55aaee', gradientType='0');">

You can alter the startColorstr & endColorstr to the colors you want to graduate from and to. The gradientType can be '0' for a top to bottom gradient and '1' for a left to right gradient. If you work with a stylesheet then create a div with an id in your HTML and add the complete filter command in the example above into the style sheet styles for that ID.


HOWEVER...

Not all browsers render gradients the same, the filters are Microsoft proprietary, i.e. MSIE only.

Also some of the more complex gradients are created using server side languages like PHP/CSS gradients and frameworks like WebKit which extend CSS by introducing variables and looping.

I personally prefer creating a simple small graphic using Adobe PS (where making gradients is actually VERY easy) and setting my page background using the following CSS so it's compatible with most browsers:

HTML: 
body {
background: url(images/mygradient.gif) 0% 0% repeat-x;
}

Obviously to create complex gradients try the links I suggest above.

-jim
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back