Website background...how to?

Discussion in 'Design and Graphics' started by IgnatiusTheKing, Aug 25, 2008.

  1. IgnatiusTheKing macrumors 68040

    IgnatiusTheKing

    Joined:
    Nov 17, 2007
    Location:
    das Fort
    #1
    How would one go about making a background like this? I'm talking about the gray gradient with the pattern that fades as it away moves away from the text area.

    Is it just a jpg in a div set to repeat in a certain way or what? I've only started delving into web design seriously in the past few months, and while I've learned a lot about Dreamweaver and CSS in general, there is still a ton I don't understand, so even looking at a site's source code doesn't always help me.
     
  2. jdl8422 macrumors 6502

    jdl8422

    Joined:
    Jul 5, 2006
    Location:
    Louisiana
    #2
    just create the gradient in photoshop then crop it to something like 5 pixels wide, save the strip as a jpg. Then for your page properties use this strip for your background image repeating it across (x-repeat). Then for the background color, pick the color of the bottom of the gradient. The background color will continue where the strip left off leaving you with a seamless background. PM me or email me if I can help. Thanks
     
  3. MoreBS macrumors newbie

    Joined:
    Apr 29, 2008
    #3
    That's right, I'd recommend using Safari's 3.0 web inspector and you can very easily see all of the images that make up that page. (A freakin' ton ;)

    Or use FireFox firebug.

    In this case they used a background that has the pattern on the left and right and the whitespace in the middle.

    here is the main bg image:
    http://www.experts-exchange.com/xp/images/body.gif
     
  4. IgnatiusTheKing thread starter macrumors 68040

    IgnatiusTheKing

    Joined:
    Nov 17, 2007
    Location:
    das Fort
    #4
    Great stuff! Thanks for the help.
     
  5. shawnathan macrumors member

    shawnathan

    Joined:
    Mar 31, 2008
    #5
    How do you suppose they got it to fade from light gray on top, to dark gray on the bottom on each side?
     
  6. Definity macrumors member

    Joined:
    Aug 14, 2008
    Location:
    United Kingdom
    #6
    They have two separate parts to the background process. I'd presume because their code is horrible and horrible code hurts my feeble little mind.

    First, they created a background with a verticle gradient, going from white to another colour:

    Code:
    html, body {
      background: url(../templates/image.png) repeat-x;
      margin: 0px; padding: 0px;
    }
    The html/body elements will have something like that. the repeat-x marker should repeat the gradient horizontally across the width of the viewable page.

    They then create another div/table wrapper, which holds the content in, giving it a width, and having a transparent image either png/gif repeating by -y (vertically).

    Code:
    #container {
      background: url(directory/image.png) repeat-y;
      width: 900px;
    }
    So, that will directly result in the gradient effect you speak of while maintaining the vertical repeating pattern.
     
  7. IgnatiusTheKing thread starter macrumors 68040

    IgnatiusTheKing

    Joined:
    Nov 17, 2007
    Location:
    das Fort
    #7
    What about the drop shadow between the content area and the background?
     
  8. samwich macrumors regular

    Joined:
    Aug 5, 2007
  9. IgnatiusTheKing thread starter macrumors 68040

    IgnatiusTheKing

    Joined:
    Nov 17, 2007
    Location:
    das Fort
    #9
  10. Definity macrumors member

    Joined:
    Aug 14, 2008
    Location:
    United Kingdom
    #10
    If you create it properly, using transparent png's/gifs, preferably pngs for quality, you could the verticle repetition nicely with it only being 4px in height.
     

Share This Page