...

View Full Version : problem with CSS Background image



deadstone
01-22-2004, 03:05 PM
Hi,

I want to set the image displayed on a page from a global stylesheet.

So I have <IMG> tags and have been using the stylesheet attribute: BackGround-Image: with a relative or full path to the image file.

Trouble is, although IE (that's IE 6.0) displays the picture given in the stylesheet, it also shows the image placeholder icon...

it's very strange, I have my image (gif file!), and in the top left hand corner the standard image placeholder that should only appear when IE cannot find an image...

here is my HTML that looks normal using SRC of Image:
<IMG style="WIDTH: 259px; HEIGHT: 87px" height=87 src="images\LapHeader1.gif" width=203 border=0>

and here is the HTML that shows the image, but also the placeholder:
<IMG class=LapHeaderImg1 WIDTH="203" HEIGHT="87" BORDER="0" style="WIDTH: 545px; HEIGHT: 253px">

and here is the CSS used in the stylesheet:
.LapHeaderImg1
{
background-attachment:fixed;
background-image: url('..\images\LapHeader1.gif')
}

the url is ok...it's a relative one at the moment....

thanks for any help

Phil

chriz
01-22-2004, 05:30 PM
OK if you just basically want a background image then go into the <body> tag and enter this

<body background="image.gif">

That should stick

me'
01-22-2004, 06:46 PM
<img/> should more or less never be used. If you want to attach an image to something, use the CSS property background-image. Say you want to include a banner image that contains the text 'hello world' in fancy formatting. This is how you should do it:
<h1 id="header">Hello World!</h1>With some CSS:
h1#header { background: url(gif.gif) no-repeat; text-indent: -2000em }

deadstone
01-26-2004, 09:47 AM
thanks but you misunderstand my issue. I can susccessfully display the image using either the CSS method or the IMG (HTML) tag with no trouble.

Problem is that when I do it with the CSS method, I get the IE Image placeholder overlaid over the image...

this is very strange.

anyone come up against this before?

thanks

Phil

rmedek
01-26-2004, 10:32 AM
I'm a little confused why you have a <img> in the HTML and a background-image in the CSS. Not to mention in the <img> you have two separate dimensions set. Are you trying to place an image over the background image? And if so, which of the two is IE putting the placeholder on, the foreground or background image?

-Rich

deadstone
01-26-2004, 10:41 AM
Hi,

No, I am not doing both. I want to just have the image applied by CSS globally...

I just gave you the code for both for comparison...

But when I apply the image using that CSS code, IE puts the image placeholder over it....

When I change it back to the HTML code it works fine...

I need to apply it using CSS so that the image data is stored in a global file.... then when some rebranding occurs in the future it can all be done in one place.

To emphasize, I am NOT using both CSS AND HTML to apply the image to the IMG tag...I want to use just CSS, but IE seems to change it...

cheers

rmedek
01-26-2004, 10:50 AM
Hi deadstone,

Okay, you should reread me's post (just how do you do a possessive me'? me's? me''s? :)). He's on the right track here.

Let's say you have an logo image for the header. You could make a <div> for the header and add the image w/ CSS. You don't need the <img> tag.

<div id="header">
...whatever else you want in the header, text, etc....
</div>
and the CSS...

#header {
width:300px;
height:100px;
background-image:url(../imagesrc.gif);
}

Hope this helps,

-Rich

mindlessLemming
01-26-2004, 01:58 PM
Stop trying to attach a bg image to an <img> element, that's crazy talk. Use a <div> as rmedek has shown:thumbsup:


Originally posted by me'
With some CSS:
h1#header { background: url(gif.gif) no-repeat; text-indent: -2000em }

*cough* display:block; *cough* :D

spufi
01-26-2004, 03:45 PM
Originally posted by deadstone
and here is the HTML that shows the image, but also the placeholder:
<IMG class=LapHeaderImg1 WIDTH="203" HEIGHT="87" BORDER="0" style="WIDTH: 545px; HEIGHT: 253px">

Because you used the <img> tag, your browser is going to try and display the image defined in the tag via the src attribute. Since you didn't define it using that attribute, it displays the placeholder.

me'
01-26-2004, 06:50 PM
Originally posted by mindlessLemming
*cough* display:block; *cough* :D *cough* already block *cough*

<!--================== Block level elements ==============================-->

<!ENTITY % heading "h1|h2|h3|h4|h5|h6">[quote source (http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict)]

liorean
01-26-2004, 06:57 PM
Sorry to break the bubble for you, but just because the DTD specifies the group as block elements doesn't make them render as block elements. The most normative resource you will find on this is <http://www.w3.org/TR/REC-CSS2/sample.html>.

HTML is a semantical structure language, not a presentational language. The DTD doesn't have anything to do with presentation. The namespace has more connection to beahvior and presentation, but the sample rendering for HTML is the closest to a standard on this area that you are going to get.

me'
01-26-2004, 07:03 PM
Yes, and it says that <h*> is a block level element.

mindlessLemming
01-27-2004, 02:50 AM
Damn, and I thought you had stepped in it :D

liorean
01-27-2004, 02:55 AM
It was a kind of faulty argumentation - correct conclusion situation.

deadstone
01-27-2004, 11:07 AM
thanks everyone...

I understand it better now...can't use global CSS to define images with local IMG tags...
:thumbsup:
cheers

Philip



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum