Need some Help with Backgrounds

SO, I'm making a site that I want to be centered in the navigator window, and on either side of the site (that is primarily one big table) I want to have two seperate background images, the one on the right aligned to the left and the one on the left side of the table aligned at right. The reason being that the background images in either side fade outward to the left and right respectively.

Can ANYONE help me out?

Again, for clarification, what I need is a way to create a tiling background image on the left side of my site and a different tiling background image on the right side.

How can I do this? And if the only way to do it is with CSS, how might I do it using CSS? Any help would be appreciated!

It is not possible to have two different images in one background-layer. But there are various workarounds to your problem. Depending on how 'strict' you want to have your page and in which browsers it must work.

The most simple one is using a table to center your content, and using its cells to put the background.

This will center the contents horizontally. To center vertically, just add a row at the top and at the bottom.


You could also position floating (page-height) DIV's containing the backgrounds...

Anyway, the CSS-code above shows how to align a background image. This works for basically all elements...

Alright, the code looks sound, but I couldn't get it to work quite right, and while I'm new to HTML and CSS, I'm not new to programming, so is there anything I need to declare in order for the browser to know that CSS is being used? Because the rest of my page is straight HTML except for the <style> block at the top.

What didn't work quite right?
It works (ofcourse) on my side...

Have a look at the attachment, this works on Win IE 6 and FireFox, but I'm sure it works on many others.

There is no need to tell the browser that you will be using CSS. Its is enabled by default. My example uses "inline style definition", but you can easily change this to another type (external style sheet, or in your <style> block).