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:
And the css:
background:#D3A664 url(http://www.westeros.org/BoD/Graphics/bg_parchment.png) repeat;
padding:5px 5px 5px 5px;
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?
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):
<style type="text/css" media="all">
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.
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.
Sounds like the best option to me.
Yeah, I'll probably go with that, all considered.