Filling the page with a background element

HTML & CSS
1

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:


<body>

<div id="Popup">

CONTENT

</div>

</body>

And the css:


#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

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">
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

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

Sounds like the best option to me.

5

Yeah, I’ll probably go with that, all considered.