Seperate Sidebox Content Background Images for left and right sideboxes.

[Jordin]

Hello,

I am new to css and I need a little help.

I need to get the left and right sideboxes to have different background images in the content area.

Right now the css for the sidebox content currently can only be changed to one image that will work on both the right and left sidebox content area.

.sideBoxContent {
	background-color: transparent;
        background-image: url(../images/sbcontent.png);
        background-position:bottom;
	padding: 0.4em;
	}

I want seperate images for the left and right sidebox content areas so I tried changing the css to:

.rightBoxContent {
	background-color: transparent;
        background-image: url(../images/sbcontentright.png);
        background-position:bottom;
	padding: 0.4em;
	}

.leftBoxContent {
	background-color: transparent;
        background-image: url(../images/sbcontentleft.png);
        background-position:bottom;
	padding: 0.4em;
	}

This does not work for me.

Can someone please help me fix the css so I can have seperate background images for the left and right sidebox content areas?

Thanks,

Jordin

[stevesh]

Try:

.rightBoxContainer .sideBoxContent { background-image:whatever;}

[Jordin]

Thanks for the help!

I am running into a problem doing it that way though. It does work for using seperate background images in the sidebox content but it causes spacing issues when I combine the sideBoxContainer and sideBoxContent css information.

Here is the side box content css:

.sideBoxContent {
	background-color: transparent;
        background-image: url(../images/sbcontentright.png);
        background-position:bottom;
	padding: 0.4em;
	}

and here is the side box container css:

.rightBoxContainer { 
        margin: 0em;
	border: 0px solid #404040;
	border-bottom: 0px solid #404040;
        margin-top: 1.5em;
	}

when I combine them like this it causes spacing issues:

.rightBoxContainer .sideBoxContent { 
        margin: 0em;
	border: 0px solid #404040;
	border-bottom: 0px solid #404040;
        margin-top: 1.5em;
        background-color: transparent;
        background-image: url(../images/sbcontentright.png);
        background-position:bottom;
	padding: 0.4em;
	}

It does allow me to use seperate background images for the left and right side box content but it causes spacing isues.

Is there some way I can get seperate background images for the left and right side box content and keep the css for the .rightBoxContainer and .sideBoxContent seperate?

Or is there some other way to do this?