CSS Background Images

[godsteruk]

Hi guys.

Having issues with my CSS which seem to prevent me from displaying the background images associated with 2 divs, to create a rounded corners effect on that element.

There are top and bottom image associated with the .box and .boxheader elements and likewise for .boxlarge and .boxheaderlarge to create rounded edges, yet neither set of images is appearing?

Cannot figure out why. CSS is as follows and I have tested the image path by just inserting these as images on the page and that much is fine.

#leftColumn {
width: 600px;
background-color: #F1FEF2;
float: left;
height: auto;
margin-left: 20px;
margin-top: 10px;
}
#rightColumn {
float: left;
width: 250px;
margin-left: 15px;
background-color: #606463;
height: auto;
margin-right: 10px;
margin-top: 10px;
}
#header {
height: 150px;
width: 900px;
}
#navbar {
height: 50px;
width: 900px;
}
#content {
width: 900px;
height: auto;
}
#footer {
width: 900px;
text-align: center;
float: left;
background-color: #606463;
padding-top: 5px;
margin: 0 auto;
}
#footer p {
font-size: 11px;
color: #FFFFFF;
font-family: 'Calibri', Arial;
margin-top: 10px;
}
#singleColumn {
float: left;
width: 750px;
background-color: #F1FEF2;
margin-left: 75px;
padding-left: 5px;
padding-top: 5px;
}
#wideColumn {
float: none;
width: 825px;
background-color: #F1FEF2;
margin-left: 35px;
padding-left: 5px;
padding-top: 20px;
}
#wideColumn p {
text-align:left;
margin-left: 40px;
font-family: 'Calibri', Arial;
padding-right: 50px;
}
#wideColumn h1 {
text-align:left;
margin-left: 40px;
font-family: 'Calibri', Arial;
}
p {
font-family: 'Calibri', Arial;
font-size: 14px;
}
a.list:link {
text-decoration:none;
font-family: 'Calibri', Arial;
font-size: 16px;
}
a.list:hover {
color:#000099;
text-decoration:none;
}
a.list:visited {
text-decoration:none;
font-family: 'Calibri', Arial;
font-size: 16px;
}
h1 {
font-family: 'Calibri', Arial;
font-weight:bold;
font-size: 20px;
color: #606463;
border-bottom: 1px solid #606463;
margin-right: 40px;
}
h2 {
font-family: 'Calibri', Arial;
font-weight:bold;
font-size: 20px;
color: #606463;
}
li {
font-family: 'Calibri', Arial;
font-size: 14px;
}
img {
border:none;
padding: 0;
margin: 0;
}
table.clear {
border-style: none;
}
tr {
border-style: none;
border-width: 1px;
border-color: #225236;
}
.alternative {
border-style: solid;
border-width: 1px;
border-color: #F1FEF2;
border-bottom:none;
background-color: #606463;
color: #FFF;
text-align:left;
}
.odd {
background-color:#E9E9E9;
font-family: 'Calibri', Arial;
border: 1px solid;
border-color: #F1FEF2;
}
.even {
background-color: #696;
color: #FFF;
font-family: 'Calibri', Arial;
border: 1px solid;
border-color: #F1FEF2;
}
.blank {
background-color: #F1FEF2;
color: #FFF;
font-family: 'Calibri', Arial;
border: 1px solid;
border-color: #F1FEF2;
}
th {
font-family: 'Calibri', Arial;
font-size: 14px;
border-style: solid;
border-width: 1px;
border-color: #225236;
}
th.solid {
background-color: #606463;
font-family: 'Calibri', Arial;
font-size: 14px;
font-weight:700;
text-align:center;
color: #FFFFFF;
border-color: #F1FEF2;
}
th.solidright {
background-color: #225236;
font-family: 'Calibri', Arial;
font-size: 14px;
font-weight:700;
text-align:center;
color: #FFFFFF;
text-align:center;
border-right-color: #225236;
}
td.formatted {
font-family: 'Calibri', Arial;
font-size: 14px;
width:auto;
border-style: solid;
border-width: 1px;
border-color: #225236;
text-align:left;
}
td.formattedCenter {
font-family: 'Calibri', Arial;
font-size: 14px;
width:auto;
border-style: solid;
border-width: 1px;
border-color: #F1FEF2;
text-align:center;
padding: 0;
}
td.left {
color: #000;
font-family: 'Calibri', Arial;
font-size: 14px;
width:auto;
border-style: solid;
border-width: 1px;
border-color: #F1FEF2;
text-align:left;
background-color: #E9E9E9;
}
td.clear {
font-family: 'Calibri', Arial;
font-size: 14px;
width:auto;
border-style: none;
background-color:#E9E9E9;
text-align:left;
}
td {
font-family: 'Calibri', Arial;
font-size: 14px;
width:auto;
border-style: none;
border-width: 1px;
text-align: left;
}
td.datasheetHeading {
background-color: #696;
font-family: 'Calibri', Arial;
font-size: 18px;
font-weight:700;
text-align:center;
color: #FFFFFF;
}
#wrapper {
height: auto;
width: 900px;
margin-left: 175px;
background-image: url(/images/pixel2.jpg);
background-repeat: repeat;
margin: 0 auto;
}
#wrapper2 {
height: auto;
width: 900px;
background-image: url(/images/pixel_long.jpg);
background-repeat: repeat-x;
margin: 0 auto;
background-position: left top;
}
#wrapper3 {
width: 900px;
margin: 0 auto;
background-color: #606463;
}
#wrapper4 {
height: auto;
width: 900px;
margin-left: 175px;
background-image: url(/images/pixel_vlong.jpg);
background-repeat: repeat;
margin: 0 auto;
}
#wrapper5 {
height: auto;
width: 900px;
margin-left: 175px;
background-image: url(/images/pixel5.jpg);
background-repeat: repeat;
margin: 0 auto;
}
#wrapper6 {
height: auto;
width: 900px;
margin-left: 175px;
background-image: url(/images/pixel6.jpg);
background-repeat: repeat;
margin: 0 auto;
}
form {
margin-left: 40px;
margin-right: 40px;
margin-bottom: 10px;
background-color: #E9E9E9;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 10px;
font-family: 'Calibri', Arial;
font-size: 18px;
}
.mandatory {
color: #F00;
}
table {
margin-bottom: 5px;
}
.sheetimage {
border: 5px solid #FFF;
}
.boxheaderlarge {
margin: 0;
;
background-color: #696;
text-align: left;
font-size: 18px;
font-family: 'Calibri', Arial;
margin-top: 0px;
background-image: url(../images/top_container.gif) no-repeat top left;
}
.boxheaderlarge h2 {
color: #FFF;
padding-left: 5px;
}
.boxlarge {
background: #F1FEF2;
background-image:url(../images/bottom_container.gif) no-repeat bottom left;
width: 600px;
color: #000;
}
.boxlarge p {
padding-left: 5px;
padding-right: 5px;
}
.boxheader {
margin: 0;
background-color: #696;
text-align: left;
font-size: 18px;
font-family: 'Calibri', Arial;
colour: #FFF;
background-image:url(../images/box_top_small.gif) no-repeat top left;
}
.boxheader h2 {
color: #FFF;
padding-left: 5px;
}
.box {
background: #F1FEF2 url(..images/box_bottom_small.gif) no-repeat bottom left;
width: 250px;
margin: 0;
color: #000;
text-align: left;
float: right;
}
.box p {
padding-left: 30px;
padding-right: 5px;
}

[swa66]

First validate to make sure you're not loosing out due to syntax errors.

Does a solid background color show up ?

• y: you need to look at the path and image more. e.g.: Relative patch are relative to the CSS, not relative the the html.
  
• n: you need to look at why your element is collapsing or not rendering e.g.: it might contain nothing but floated elements.

Otherwize use the troubleshooting thread [webmasterworld.com]'s suggestions to e.g. start to remove and slowly add back in.

[godsteruk]

Is there an easy tool to validate where the page is only available locally?

Can confirm the solid background colour does show as expected, minus of course the image also associated with that line of CSS.

Have tested the path for the image and this is fine.

Could it be something to do with mutpile nestings i.e. this particular div sits within #wrapper, #content, #leftColumn, #boxlarge.

Have also tried the Firefox firebug tool to see if this would shed any light...still nothing obvious.

[rocknbil]

Is there an easy tool to validate where the page is only available locally?

W3C validator [validator.w3.org] in which you can just copy and paste the code (select direct input tab)

I get this sometimes too - without a deep look at your code, it's likely you need to set background:transparent on the inner container, allowing the outer container BG's to show through.

You might isolate the problem by putting it in a document alone, and experimenting . . . when doing the round-corner nesting project sometimes the margins and padding can give you headaches too.

#outer {
background: #ffffff url(bg-left.gif) top left repeat-y;
}
#inner {
background: transparent url(bg-right.gif) top right repeat-y;
}

[swa66]

My eye just cought this one:

background: #F1FEF2 url(..images/box_bottom_small.gif) no-repeat bottom left;

might need to be
background: #F1FEF2 url(../images/box_bottom_small.gif) no-repeat bottom left;

To be honest: I never use the ../ construct in CSS as the relative to the css part is confusing. I rather use absolute paths. [Like you did in the rest of your code]

[godsteruk]

Right, I am one step closer.

I noticed another image I had on the page had the path url(/images/image.jpg).

Changed both ../ and images/ to /images/image.gif and this now appears to be rendering in my browser.

The only problem now is that they don't seem to be appearing when I preview the page in either IE or Firefox...weird!

[rocknbil]

If you're previewing offline, leading / won't work. You'll need to do ../ when working offline.

[godsteruk]

Thanks guys.

Finally managed to resolve this and as rocknbil suggested, for working offline I needed to define the image path with the ../ prefix.