...

View Full Version : Background Images - This should be so simple!



stevecopley
05-12-2007, 09:29 PM
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:


<!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

_Aerospace_Eng_
05-13-2007, 08:58 AM
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.

globex
05-13-2007, 09:33 AM
Loads just fine for me. Although I would recommend to use this format:



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.

Arbitrator
05-13-2007, 09:33 AM
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/*”.

_Aerospace_Eng_
05-13-2007, 09:37 AM
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.

Arbitrator
05-13-2007, 09:48 AM
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:


selector {
background-color: pink;
background: url("image.png");
}

Will end up being equivalent to:


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.

_Aerospace_Eng_
05-13-2007, 09:52 AM
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.

stevecopley
05-20-2007, 10:44 AM
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! ;-)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum