View Full Version : CSS + 2 backgrounds

02-08-2005, 11:58 AM
hi. want to make a web page with 2 backgrounds running horizontally. one at the top (#banner)coming down to 150px and then another background for the rest of the page...

this isnt working for me... any ideas???

so far i have...

#banner {
background-image: url(images/bkg2.gif);

#bkg {
background-image: url(images/bkg1.gif);

doing this step by step the #banner works fine. but when i add the #bkg nothing seems to happen...

02-08-2005, 12:18 PM
It sounds easy but for some reason I'm having trouble understanding what you need. Can you post a screenshot or a link?

P.S. Also, make sure both block elements have some content, otherwise you won't see an image (background images don't take up space).

02-08-2005, 12:38 PM
okay here's a screenshot...

02-08-2005, 12:59 PM
It'd be really easy to do this if you can tile the entire image horizontally...

Anyhow, I forgot to ask for the code, too... we need to see where those ids are assigned...

02-08-2005, 03:04 PM
A single element can only hold ONE background image; if you want to assign two background images, you'll need TWO elements. If these need to occupy the same area, one has to be enveloping the other like a wrapper; the parent element (the "wrapper") background will be behind the child element background.

In your case (guessing from the style rules provided), it look like the "banner" element could either be a child of a parent "bkg" element (the body?), or sit on top the rest of the page; a look at the actual page markup would be useful, though.

02-09-2005, 03:23 AM
Okay ronald,
i understood nothing about the parents or children thing. onyl saw references to those about a week ago....

Since then i have been able to get the 2 backgrounds working. but theres a hitch. i added a height to the #bkg of 100%. and what it seems to have done is starting counting from the bottom of #banner (150px down) and therefore puts a scrollbar on the window - which is not what i want as i'll be using an Overflow:auto in my content section.

Can you possiblly explain the parent thing. Is this a pseudo class???

heres the markup and css

<link href="CSS_bkg.css" rel="stylesheet" type="text/css">


<div id="banner"></div>
<div id="bkg"></div>



#banner {
background-image: url(images/bkg2.gif);

#banner2 {
background-image: url(images/bkg2.gif);
clip: rect (150px 500px 0px 10px);

#bkg {
background-image: url(images/bkg1.gif);
background-attachment: fixed;

02-09-2005, 03:38 AM
I was about to type something that would solve this, but I realized that would only make the problem worse... here's why.

You know what you want your page to look like when it's done, right? But you also want your webpage to have some sort of meaning and structure, otherwise you might as well just put a .jpg up there and call it a day. Right now your structure is this:

-a division of the page that's a banner
-a division of the page that's a background

When I'm assuming it should be more like this (based on the screenshot):

-a title
-a main header
-heading one
-a copyright notice

The thing is, the entire point of the movement to HTML and CSS is to have a method to style your page independently of its semantic structure. In other words, you can separate style from content. You can style your paragraphs, your headings, your lists, the <body>, the <html>, the <title> even (well, only in the newest of the new browsers).

Until you actually HAVE content, you don't have much to work with as far as style. Code your page for content, then style as needed.

02-09-2005, 04:31 AM
An excellent point. always good to have someone around to remind us about all that form over function business...
i tend to design a the websites appearance and then go from there....which is probalby why i keep painting myself into corners....

02-09-2005, 05:19 AM
Well, I'm a sucker for style over content myself :) But I think it's better to go nuts with the style in Photoshop (or Fireworks, anyone?) then put it aside and focus on content, THEN put the two together...

My two cents...

02-09-2005, 10:44 AM
I know we all are going on about separating presentation from content, and to the extent that we use CSS for presentation and (X)HTML for structure and content, this is true; however, when it comes to laying out a page, and to some extent styling it, there are intimate ties between the structure and content of a document and its presentation.

Since I'm a coder, I tend to start with the nuts-n-bolts and usually try to pour some presentation over it lateron. Although I expect the "right" approach is different for every person, I guess a parallel approach would work well: start with both a rough idea about a page's main structure, and a rough sketch of the desired layout; then, work towards more detailed levels, keeping one eye on the design while expending the structure, and keeping one eye on the structure while working out the design.

02-09-2005, 10:50 AM
See? This is why you're the advisor. :) Good point...

Here's a pretty good read concerning the "blueprint" stages... it may not work for everyone but it's pretty interesting nonetheless:


02-09-2005, 11:02 AM
This is why you're the advisor
Heh... :o

Great article by the way, there, Richard; I got to put that one on my "daily blog reading" list...