centerMainWrapper background image not recognized

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 :cool:

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

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:

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;

Thanks :thumbsup:

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.