Some Help With CSS Backgrounds

Discussion in 'Web Design and Development' started by emorydunn, Jun 6, 2008.

  1. emorydunn macrumors 6502


    Jun 5, 2006
    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:
    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?
  2. SrWebDeveloper macrumors 68000


    Dec 7, 2007
    Alexandria, VA, USA
    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:

    <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.


    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:

    body {
    background: url(images/mygradient.gif) 0% 0% repeat-x;
    Obviously to create complex gradients try the links I suggest above.


Share This Page