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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background Images - This should be so simple!

    Hello

    This is driving me nuts - can anyone help?!

    All I want is to add background images to some divs. Nothing to it... but the images are not showing in some browsers (Safari, FF2) but show fine in others (Camino). The code validates (both HTML and CSS).

    I've been through endless websites looking for clues. The images are there, the paths to them are correct (I've tried both absolute and relative paths, but no difference)

    What am I doing wrong?!

    Here is a test example:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title>Copleys</title>
    	<meta name="generator" content="TextMate http://macromates.com/">
    	<meta name="author" content="Steve Copley">
    
    	<style type="text/css">
    		body {
    			background-color: #F5F4F4;
    			color: #666;
    			font: normal 15px/1.1em Helvetica, Arial, sans-serif;
    			margin: 0px;
    			padding: 0px;
    			text-align: center;
    		}
    
    		#container {
    			width: 700px;
    			margin: 20px auto;
    			padding: 0px;
    			text-align: left;
    		}
    
    		#home {
    			width: 700px;
    			padding: 0;
    			margin: 0 0 20px 0;
    			border: 1px solid #666;
    			background-color: #999;
    			text-align: left;
    			clear: both;
    			height: 400px;
    			background-image: url(http://www.copleys.org/images/banners/banner_main.jpg);
    		}
    
    		h1 {
    			font-family: Helvetica, Verdana, Arial, Sans-Serif;
    			font-weight: bold;
    			text-align: left;
    			clear: both;
    			margin: 360px 0 0 30px;
    			padding: 0;
    			font-size: 26px;
    			color: #fff;
    		}
    	</style>
    </head>
    
    <body>
    	<div id="container">
    		<div id="home">
    			<h1>TEST TITLE</h1>
    		</div>
    	</div>
    </body>
    </html>
    The code is in use at http://www.copleys.org

    Any help greatly appreciated (and I'm quite happy to have someone point out that I've done something stupid!)

    Best regards

    Steve Copley
    Last edited by stevecopley; 05-12-2007 at 08:31 PM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Seems to be an issue with your server. I downloaded the image, uploaded it to imageshack and used their url and it works fine. Check to see if hotlinking is enabled in your control panel.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Loads just fine for me. Although I would recommend to use this format:

    Code:
    background: transparent url('images/image.jpg') no-repeat;
    setting the transparency is proper code if you're going to use 'background' and not 'background-image' and starting the url with a slash (/) might cause IE problems.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,316
    Thanks
    29
    Thanked 280 Times in 274 Posts
    You may want to ensure that ad‐blocking software is not blocking the image. The image at the URI “http://www.copleys.org/images/banners/banner_main.jpg” was blocked by the Adblock extension in Firefox because I have a filter set up to block all files coming from a directory named “banners” (which will tend to be advertisements). The filter looks like “http://*/banners/*”.
    Last edited by Arbitrator; 05-13-2007 at 08:51 AM. Reason: I corrected the URIs and noted that Adblock is an extension (for Firefox).
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by Arbitrator View Post
    You may want to ensure that ad‐blocking software is not blocking the image. The image at the URI “http://www.copleys.org/images/banners/banner_main.jpg” was blocked by Adblock in Firefox because I have a filter set up to block all files coming from a directory named “banners” (which will tend to be advertisements). The filter looks like “http://*/banners/*”.
    Ha didn't even think about adblock. I thought about zone alarm but forgot about adblock. I disabled adblock on your page and the image showed up. Solution: rename your image to not have the word banner in it and move it to a folder whose name is not banner.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,316
    Thanks
    29
    Thanked 280 Times in 274 Posts
    Quote Originally Posted by globex View Post
    setting the transparency is proper code if you're going to use 'background' and not 'background-image' and starting the url with a slash (/) might cause IE problems.
    That’s not really necessary. When a shorthand property is used, the unset longhand properties are set to their default values if not specified; the value will be set to its default (which happens to be transparent). Thus, the following:

    Code:
    selector {
      background-color: pink;
      background: url("image.png");
      }
    Will end up being equivalent to:

    Code:
    selector {
      background-color: transparent;
      background-attachment: scroll;
      background-position: 0% 0%;
      background-image: url("image.png");
      background-repeat: repeat;
      }
    As you can see, specifying that the background color should be transparent is redundant.
    Last edited by Arbitrator; 05-13-2007 at 08:53 AM. Reason: I corrected a CSS error.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    And the leading / won't mess up IE. That is valid and tells the browser to find the image at the root of the site. Also on some browsers the quotes in the url() would actually make the image not display at all.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You are a genius! I feel very stupid now...

    I had AdBlock running on FF and PithHelmet on Safari - both blocked the images as ads.

    At least I only wasted the one day trying to fix my non-broken code! ;-)


  •  

    Posting Permissions

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