Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Single Column CSS Help

    Hello,
    I am wanting to put together a page that is centered, a single column page layout in CSS... and have a gradient on either side like at: http://www.gamespot.com/index.html. What would be the best setup for this?

    Thanks,
    POJ

  • #2
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's pretty easy really -

    (assuming you already made the gradient graphic)

    First of all you'll need to set the background colour of your page to the very last tone of the gradient (best to really zoom into the image in your graphics program - and use the colour picker tool to pick the very last colour, at pixel level)

    Then you take a 1-2 pix horizontal cut of the background graphic, all the way accross, sacve it as say: background.png...

    ...and in your CSS, something like this:

    Code:
    body {background: #xxx url(images/background.png) top center repeat-y;}
    That will pretty much take care of it - hope that makes sense!

    Kind regards,

    Gary

  • #3
    New Coder
    Join Date
    Jan 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Gary,
    Thanks so much for your response. It makes a lot of sense. I will work it out!

    Thanks!,
    PoJ

  • #4
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No problem POJ.

    You can see the image they've used here http://img.gamespot.com/gamespot/sha...tandard/bg.gif

    Pretty straightforward

    Gary


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •