I've set a background image within a <div> container. locally, it displays fine.

When I upload, the image does not display. I've posted below what I hope is the relevant snippets of code. I'm fairly new to this - please don't be shy with comments/feedback, and particularly any questions if i've missed any info.

If it would help, you can look at the source directly (nothing too exciting to see, just a pet project in start up mode): www.upside-down-land.com

I've checked that I also uploaded the image, and to the correct directory too. www.upside-down-land.com/resource/postHead.jpg

I've browsed through a few forums, but not quite found anything that would offer a suggestion for where I've gone wrong. I'm hoping more experienced eyes will spot something silly I'm overlooking.

Kind Regards,

Sam

<div id="newsPost">
<div id="newsPostBucket">
<div id="newsPostDate">[Date]</div>
<div id="newsPostType">[Type]</div>
<div id="newsPostTitle">[Title]</div>
<div id="newsPostBody">[Content]</div>
<div id="newsPostFooter">[Link to top]</div>
<div id="newsPostGap"></div>
</div>
</div>


#newsPost {
height: 290px;
width: 700px;
padding-left: 0px;
right: 0px;
left: 50px;
position: relative;
}
#newsPostBucket {
background-repeat: no-repeat;
height: 290px;
width: 700px;
background-image: url(Resource/postHead.jpg);
}
#newsPostDate {
height: 20px;
width: 330px;
float: left;
color: #FFF;
margin-right: 0px;
padding-left: 20px;
}
#newsPostType {
float: left;
height: 20px;
width: 330px;
text-align: right;
color: #FFF;
padding-right: 20px;
}
#newsPostTitle {
height: 30px;
width: 680px;
float: left;
color: #FFF;
padding-left: 20px;
font-size: 16px;
font-weight: bold;
font-style: normal;
}
#newsPostBody {
float: left;
height: 200px;
width: 680px;
color: #039;
background-repeat: no-repeat;
padding-left: 20px;
}
#newsPostFooter {
float: left;
height: 20px;
width: 680px;
text-align: right;
color: #039;
padding-right: 20px;
font-size: 10px;
}
#newsPostGap {
float: left;
height: 20px;
width: 700px;
color: #039;
}

Be careful! Url is case-sensitive.
It will work with this:
#newsPostBucket {
background-repeat: no-repeat;
height: 290px;
width: 700px;
background-image: url(resource/postHead.jpg);
}
You inserted "Resource" instead of "resource".

Ha - always the daft wee things!

Thank you Maurizio.

I had stumbled into the solution by accident. When I linked the image in my post and followed it to test, I received an error message in IE which I had thought strange as I had checked the image already.

I then realised that I had to change the case to link properly - and have now uploaded the amended html file.

I appreciate the feedback - and shall try to be a little more dilligent in future!

Kind Regards,

Sam

It's always best to get in the habit of coding in lowercase except for the actual content. Folders/file names should all be in lowercase including selector names in CSS. That way you will not have to remember whether something is in caps are not.

Some FTP programs will change file names to lowercase when uploading and, if your links use what you used locally with caps, then you have broken links. Also, no whitespace should be used in any folder/file name as many browsers will not find the folder or file with whitespace in it.

Please visit our homepage URL through my Signature and URL Link. You'll find it interesting....
_______________________________________________________________________
clothing tags (http://www.rogenstudio.com/labelfactory/)
apparel labels (http://www.rogenstudio.com/labelfactory/)
custom garment labels (http://www.rogenstudio.com/labelfactory/)