SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How is the background effect done?

    http://www.csszengarden.com/?cssfile...61.css&page=10

    At this zengarden design...how is there background image done? If you right click and then view image, you'll see its just an image, probably 800px in width or so with the "white" space for the content in the middle with the gradient shadows on each side. So if you set this to the background, how are you going to get it to strech the full width of the page? width: 100%? Then if you do that will that not mess up your "white" space where the content should go, making it wider?
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  2. #2
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, if you have large window enough then the backround will be repeated (and the white will be visible in each side). It doesn't stretch, it's repeated.
    Simon Pieters

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So what did they have to do to do that effect? I looked at the CSS file but it didn't even have reference to that background image.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  4. #4
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.csszengarden.com/061/page_fill.jpg
    http://www.csszengarden.com/061/061.css
    body {
    /* ... */
    background-position : center;
    background-image : url(page_fill.jpg) ;
    background-repeat : repeat-y;
    }
    Simon Pieters

  5. #5
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ohh...thank ya.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  6. #6
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see that the image they have is 2000px in width...is it really necessary for you to have an image that large in width to do this?
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  7. #7
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Naw, about 1300px should be fine if your content area is 800px wide. (unless your visitors use resolutions above 1600*1200...)

    But on the web it's not the pixels that matters, it's the kB's
    Simon Pieters

  8. #8
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would like to make it so its viewable to everyone no matter what screen resolution they are using.

    Say I don't make it 2000px and someone who has a high resolution browser views the site...what will be messed up?
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  9. #9
    Awesome Addict
    Join Date
    Mar 2004
    Location
    Toronto, Canada
    Posts
    326
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deronsizemore
    I would like to make it so its viewable to everyone no matter what screen resolution they are using.

    Say I don't make it 2000px and someone who has a high resolution browser views the site...what will be messed up?
    If it's not wide enough they will see the default body background color instead of the image. The image will "end" on the left and right side.

  10. #10
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see...

    Thanks for all the help guys.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  11. #11
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    Finland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by zcorpan
    But on the web it's not the pixels that matters, it's the kB's
    Actually, pixels might matter. I once used 4096 pixels wide background picture and it got messed up in IE/Mac


Bookmarks

Posting Permissions

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