Website Design Forum

**sonny_c** · 08-28-2007, 04:03 PM

I am going to create a simple website in Photoshop CS3 and have a friend slice and code it using SiteGrinder2.

My question, How do I take the background image below (which contains a gradient and scan lines) and have it fit the entire screen?

-Sonny

**tripy** · 05:46 PM

I'm not a specialist on design, but I'd say you need 2 pics for that.

One, aligned on top, with the horizontal gradient and with a repeat-x to expand it through your page width.
And a second one as the body background, which will contain the stripes, with a repeat css statement to fill all your browser page.

But honestly, it will be easier to put it together with a text editor and CSS, rather than those crappy tools that will generate a ton of junk just for that:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>testing..</title>
  </head>
  <style type="text/css">
    #horGrad{
      width:100%;
      height:43px;
    }
    body{
      margin:0px;
      padding:0px;
      background: transparent url('/img/stripe.png') repeat top left;
    }
  </style>
  <body>
  <img id="horGrad"  src="/img/horiz.png" alt=""/>
  <p>
    blah blah blah
  </p>
  </body>
</html>