Home/ Questions/Q 657527
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T22:50:03+00:00

Here’s two screen shots, showing the effect with a small viewport that has to

  • 0

Here’s two screen shots, showing the effect with a small viewport that has to be scrolled.

alt text
alt text

HTML looks like this: (ignoring head and html tags)

<body>
 <div id="grad1"></div>
 <div id="wrapper">
 <header>
  <h1 class="logo"><a href="/">Business Name</a></h1>
 </header> 
 <nav>
  <ul>
   <li><a class="first" id="index" href="/index.php">Home</a></li>
   <li><a  id="whatwedo" href="/whatwedo.php">What we do</a></li>
   <li><a  id="communicating" href="/communicating.php">Communicating</a></li>
   <li><a class="last" id="contact" href="/contact.php">Contact Us</a></li>
  </ul>
 </nav>
 <div style="clear:both;"></div>
 <section>
  <?= $content ?>
 </section>
 <footer>
  &copy; 2010
 </footer>
 </div> 
</body>

And the (trimmed down) CSS relating to body, grad1 and wrapper look like this:

body {
 color: #111;
 background-color: #3E9C9D;
}

#grad1 {
 height: 600px;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -100;
 width: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#3E9C9D));
    background-image: -moz-linear-gradient(#fff 0%, #3E9C9D 100%);
}


#wrapper {
 max-width:960px;
 min-width:840px;
 margin: 0 auto;
}

How do I fix this? I have to have the gradient on a different div as far as I know, because I need to specify the height.

(I am aware that the CSS gradient doesn’t work in IE – there is a background-image there to emulate the behaviour. It has the same problem.)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    OK, for people who find this and can’t work it out, the CSS should look like this:

    body {
 color: #111;
 background-color: #3E9C9D;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#3E9C9D));
 background-image: -moz-linear-gradient(#fff 0%, #3E9C9D 100%);
 background-repeat:repeat-x;
 background-size: 100% 600px;
 -o-background-size: 100% 600px;
 -moz-background-size: 100% 600px;
 -webkit-background-size: 100% 600px;
}

#wrapper {
 max-width:960px;
 min-width:840px;
 margin: 0 auto;
}

    Edit from 2 years after – the gradient syntax has changed somewhat, and now everyone supports it. Make sure you read up on the changes before using this code.

    • 0