Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Background image does not not display within div container

    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

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

    Code:
    #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;
    }
    Last edited by samma; 06-20-2010 at 12:09 PM.

  • #2
    New Coder
    Join Date
    Jun 2009
    Posts
    49
    Thanks
    7
    Thanked 1 Time in 1 Post
    Be careful! Url is case-sensitive.
    It will work with this:
    Code:
    #newsPostBucket {
    	background-repeat: no-repeat;
    	height: 290px;
    	width: 700px;
    	background-image: url(resource/postHead.jpg);
    }
    You inserted "Resource" instead of "resource".

  • Users who have thanked Maurizio1230 for this post:

    samma (06-20-2010)

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    837
    Thanks
    11
    Thanked 79 Times in 77 Posts
    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.
    ☠ ☠RON☠ ☠

  • #5
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Please visit our homepage URL through my Signature and URL Link. You'll find it interesting....
    _______________________________________________________________________
    clothing tags
    apparel labels
    custom garment labels


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •