How to Define Left Margin for Content vs Background Image? (noob)

Discussion in 'CSS' started by ritmatt, Mar 8, 2008.

  1. #1
    I realize that sounds (and probably is) >really< simple, but I was admiring two sites and see that they each react differently to resizing a window smaller than the content.

    www.xerox.com

    ^^^
    This site seems to use a 1600x1 horizontal line for its background image. The white "content background" is about 822 pixels wide, but the content itself is only 740 pixels wide. What's nice is that resizing the browser window to smaller and smaller horizontal sizes causes the background to scroll "off" the left side all the way to the left edge of the important content. That's cool because the site will fit in an 800x600 browser window, even though it appears wider than that.

    www.12stone.com

    ^^^
    This site uses a 1024x768 box for its background image. If you resize the browser window smaller than ~1024 pixels wide, the left "bumper" is at the left edge of the background image rather than the left edge of the content.

    I'd like my site background to behave like the Xerox site, but whenever I set a background image for the BODY tag, that seems to define the left edge of the page, no matter where my actual content is. Can anybody point me in the right direction?

    Thanks.

    Matt
     
    ritmatt, Mar 8, 2008 IP
  2. digitalproducts

    digitalproducts Banned

    Messages:
    564
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #2
    have you try with
    MARGIN-LEFT:
    leftmargin


    Something like that <body background="images/background.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

    ??
     
    digitalproducts, Mar 8, 2008 IP
  3. ritmatt

    ritmatt Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks, but I don't think that's quite what I'm after.

    I want to have my content centered on the page in an invisible 740px-wide box. And I want the background, also centered on the page, to be 822px wide. When the browser is resized to something smaller than 822px wide, I want the left and right edges of the background to disappear off both sides of the page at the same time (not just the right side, like on the 12Stone site).

    Does that make sense?
     
    ritmatt, Mar 8, 2008 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    selector {background: url(some.jpg) 50% top repeat-y;}

    cheers,

    gary
     
    kk5st, Mar 8, 2008 IP
  5. ritmatt

    ritmatt Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    That's what I was looking for - thanks Gary. For me, that "50%" was the missing ingredient.
     
    ritmatt, Mar 8, 2008 IP