SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Filling the page with a background element.

    I've got a set of special, simple-layout pages as part of my site where I need the background set on the container div to fill the whole page even when there's very little text. I am trying to avoid setting the background on the body tag instead, just so that I can keep the same CSS file as for the main pages.

    The html for the simple pages is just this:

    Code:
    <body>
    
    <div id="Popup">
    
    CONTENT
    
    </div>
    
    </body>
    And the css:

    Code:
    #Popup {
    background:#D3A664 url(http://www.westeros.org/BoD/Graphics/bg_parchment.png) repeat;
    height:100%;
    margin:0;
    padding:5px 5px 5px 5px;
    text-align:left;
    }
    Is it doable to get the background specified for the Popup element to always fill the whole page, regardless of amount of content? Without height:100% it stops at the end of the content, and with it it just fills the view, but when you scroll down its not there. Or is an alternative body tag a better approach?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Linda A View Post
    just so that I can keep the same CSS file as for the main pages.
    I don't think that justifies giving yourself so much grief. The body tag is the place to set the background. You have a couple of very simple options, I would say. You could add a rule for the background of the body tag in the head section (if each popup page has a different background):

    Code:
    <style type="text/css" media="all">
    body {
    background: url();
    }
    </style>
    or have a second external style sheet just for the popup pages if they all have the same background:

    <link type="text/css" media="all" rel="stylesheet" href="main.css">
    <link type="text/css" media="all" rel="stylesheet" href="popup.css">

    Any body styles in the second file will override those in the first.

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's a couple of reasons that I don't want to add another style sheet, and definitely no css right on the pages.

    Hrm, I'll have to consider what might be easiest. I have an awful lot of templates to change, so using the same id that I already have in place would definitely save the most work. But if it that isn't doable, putting a class or id on the body tag so I can have two separate in the same stylesheet might work.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Linda A View Post
    putting a class or id on the body tag so I can have two separate in the same stylesheet might work.
    Sounds like the best option to me.

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I'll probably go with that, all considered.


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
  •