SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Right-aligned Background troubleshooting

    I have a site with a background I want attached to the right edge of the viewport. However, I only want the site to get down to about 800px. At that point, I want the background to stay put in relation to the content and let the browser clip the background. It's purely eye-candy and will distract from the content if it's allowed to slide behind the content, but it needs to be attached to the right.

    Boy...I hope I explained that well enough...

    Here's what I thought would work but didn't:

    Code:
    body {
    	width: 100%;
    	min-width: 800px;
    	background: url('../images/border.jpg') right top repeat-y;
    }
    I assumed that by attaching the background to the right and then setting a min-width on the body, the background would stay attached to the right edge out if larger than 800px, and would sit attached to 800px on the right if the viewport was smaller than 800px (and thus clip off if the browser got below 800px).

    Needless to say, this didn't work...

    How would I accomplish this?

    If needed, I can post this to my testing server, but it seems like it's probably simple enough...
    body {
    display: public-affection;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Just use a wrapper instead of the body and it should work.

    Code:
    #wrap {
        width: 100%;
        min-width: 800px;
        background: url('../images/border.jpg') right top repeat-y;
    }
    Code:
    <body>
    <div id="wrap">
    
    page content etc....
    
    </div>
    (won't work in ie6 as it doesn't understand min-width)


    If it needs to be an initial 100% high then see the faq on 100% height.

    Code:
    html,body{height:100%}
    #wrap{min-height:100%}
    * html #wrap{height:100%}

  3. #3
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What would be a solution for ie6? Is there a hack or do I need to come up with a compromised design to get it to work?
    body {
    display: public-affection;
    }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    See the faq on min-width for a couple of solutions. The easiest is probably to use an expression to imitate the min-width just for IE6 although expressions are notoriously slow.

    There is another way using negative margins but requires extra mark up.


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
  •