Dual Background?

[Mal]

Ok, here's a random thought I had regarding CSS web design (not necessarily CSS, I guess, though that would be the method I use):

Is there any way to have two background images, one of which repeats and the other which is static? Basically my thought is that you could have one image that forms a shell and a top design, and then the second could be a simply 1 pixel tall (or higher) image that repeats below the first for the rest of the page, no matter how long it gets. It would be an easy way to put rounded corners on a fixed width column, though only on the top corners (at the bottom the column would just end at the bottom of the page. I don't know if you can visualize it the way I am right now, but I'm seeing some pretty cool possibilities. Any ideas on a good way to make this work?

The only way I can see to do a form of this is to have your container div have the non-repeating image as it's background, with the top, sides, and bottom all flush with the edge of the browser window, and then having the page background be the repeating image. It'd work alright, but it limits what you can do with the container div outside of that. I think.

jW

 

[mnkeybsness]

I won't give you a direct answer, but instead a hint:

You can style the BODY and HTML elements in many different ways...

 

[Mal]

Why must you insist on sounding like a teacher?

I think I get what you're saying, and I think it's similar to what I was thinking, just said in a different way. Could you explain a little more specifically what you mean, however?

jW

 

[Stampyhead]

The HTML tag could contain a repeating image and the body tage could contain a static image. I believe that's what he is saying.

 

[mnkeybsness]

The HTML tag could contain a repeating image and the body tage could contain a static image. I believe that's what he is saying.

That, and the HTML tag can text-align center, the BODY tag can take on a width and auto margins so that you can have a centered site.

 

[radiantm3]

You can attach 2 more images to an element using the :before and :after pseudo classes. The only downside is they don't show up in IE. This is probably the cleanest and most semantic way to create resizable rounded corner boxes.

 

[NoNameBrand]

I typically do something like this, but I attach the repeating background to the body and the top background to the header div.