centerMainWrapper background image not recognized

**tcjay** · 30 Dec 2010, 01:14 PM

I am trying to place a background image in the contentMainWrapper area so it shows up in the left, center and right columns.

I am using this code:
#contentMainWrapper {
padding-bottom: 20px;
border-left:1px solid #663300;
border-right:1px solid #663300;
background-image:url(../images/Bgmain.gif);
background-repeat:repeat-x;
background-position: bottom left;
}

Opera shows this:

#contentMainWrapper {
background-color: #f3f1f1;
border-left-color: #663300;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #663300;
border-right-style: solid;
border-right-width: 1px;
padding-bottom: 20px;
}

http://www.stitchboutiqueboston.com

I can't seem to figure out why it is ignoring the background-image line.

TIA Tom

**lat9** · 30 Dec 2010, 05:36 PM

I couldn't see what the issue is with your background image, but you've got Categories misspelled as Catagories on your left sideber.

**gjh42** · 30 Dec 2010, 07:24 PM

Not sure what you put in the background, but this is what you have:

Code:

#contentMainWrapper {
	/*background-color:#F3F1F1; */
	padding-bottom: 20px;
	border-left:1px solid #663300;
	border-right:1px solid #663300;
	background-image:url(../images/Bgmain.gif) scroll repeat-x left bottom;

It needs to be like this:

Code:

#contentMainWrapper {
	padding-bottom: 20px;
	border-left:1px solid #663300;
	border-right:1px solid #663300;
	background:#F3F1F1 url(../images/Bgmain.gif) scroll repeat-x left bottom;
}

When using the combined "shorthand" background property, you need to use background: and not background-image:

**tcjay** · 30 Dec 2010, 08:01 PM

Thanks for the catch.

I looked at the css in Firebug and it is what it is showing.

#contentMainWrapper {
background-color: #F3F1F1;
border-left: 1px solid #663300;
border-right: 1px solid #663300;
padding-bottom: 20px;
}

This line does not appear.

background-image:url(../images/Bgmain.gif) scroll repeat-x left bottom;

**tcjay** · 30 Dec 2010, 08:29 PM

Thanks

**gjh42** · 30 Dec 2010, 08:30 PM

Firebug does not show what the actual file contains; it shows a standardized version of the information in the file.

background-image:url(../images/Bgmain.gif) scroll repeat-x left bottom; is not a valid declaration because of the extra values in it, so Firebug ignores it, as do browsers when rendering the styling.