Stylesheets - CSS - image is not showing

Author

CSS - image is not showing

Gabriella

2006-07-13, 7:15 pm

Hi,
I have the CSS class below, and the image (pro.gif) is not showing on
my page.
It is showing ONLY where's some text in the div, but all I need is the
image itself.

..pro {background-image: url(/Backpage/Images/pro.gif); display: inline;
}

Am I doing something wrong?

Thanks,
Gabi.

Els

2006-07-13, 7:15 pm

Gabriella wrote:

> Hi,
> I have the CSS class below, and the image (pro.gif) is not showing on
> my page.
> It is showing ONLY where's some text in the div, but all I need is the
> image itself.
>
> .pro {background-image: url(/Backpage/Images/pro.gif); display: inline;
> }
>
> Am I doing something wrong?

Yup, you're forgetting to show us the patient :-)

However, a semi-educated guess: a background image is a background to
an element. If that element has no height or width, there is no space
to show that background image. Without seeing what you're doing, I'm
inclined to think you should give ".pro" a width and height to fit
your background-image, and probably a space inside if there is no text
in it.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Steve Pugh

2006-07-13, 7:15 pm

Gabriella wrote:

> I have the CSS class below, and the image (pro.gif) is not showing on
> my page.
> It is showing ONLY where's some text in the div, but all I need is the
> image itself.
>
> .pro {background-image: url(/Backpage/Images/pro.gif); display: inline;
> }
>
> Am I doing something wrong?

inline elements with no content have zero size.

Steve

Harlan Messinger

2006-07-13, 7:15 pm

Gabriella wrote:
> Hi,
> I have the CSS class below, and the image (pro.gif) is not showing on
> my page.
> It is showing ONLY where's some text in the div, but all I need is the
> image itself.
>
> .pro {background-image: url(/Backpage/Images/pro.gif); display: inline;
> }

The question is, why are you using a background image when what you
clearly want is an image that appears, not behind other content, but on
its own part of the screen. That's what the IMG tag is for.

Backgrounds don't occupy space, they only appear behind space that's
already occupied. If you have

<div class="pro"></div>

that DIV won't take up any more space in the window than it would
without the background image: none. There isn't anything for the
background image to appear behind. If you have

<div class="pro">abc</div>

then you'll only see as much of the background image as will fit within
the space occupied by the "abc" and the remainder of the DIV's width to
the right of it.

Gabriella

2006-07-13, 7:15 pm

Thanks everyone!
Actually what I want to do is have a <a href...> tag with an image that
changes upon hover (onmouseover).

I am using my css "pro" class as follows:
<a href="someurl..." class="pro"></a>
note that it is without content.
My desire is that upon hover, the image will change.
Curretnly, I can't even display the primary image...

I know that I can use this instead:
<a href="someurl..."><img src="/Backpage/Images/pro.gif"
onmouseover="javascript:..."></a>
But I thought there's a more elegant CSS way.
Is there?

Thanks,
Gabi.

Harlan Messinger

2006-07-13, 7:15 pm

Gabriella wrote:
> Thanks everyone!
> Actually what I want to do is have a <a href...> tag with an image that
> changes upon hover (onmouseover).
>
> I am using my css "pro" class as follows:
> <a href="someurl..." class="pro"></a>
> note that it is without content.
> My desire is that upon hover, the image will change.
> Curretnly, I can't even display the primary image...
>
> I know that I can use this instead:
> <a href="someurl..."><img src="/Backpage/Images/pro.gif"
> onmouseover="java script:..."></a>
> But I thought there's a more elegant CSS way.
> Is there?

The following should work, though if CSS is turned off, both images will
appear. But then, in your approach, if CSS is turned off, then *no*
image appears which means there isn't anything to click.

However, in IE6 it *doesn't* work, and I'm not sure why. I know IE
doesn't recognize :hover on elements *other* than A, I expected it to
work here.

CSS:
a:link img.without-ro,
a:visited img.without-ro { display: inline; }

a:link img.with-ro,
a:visited img.with-ro { display: none; }

a:focus img.without-ro,
a:hover img.without-ro,
a:active img.without-ro { display: none; }

a:focus img.with-ro,
a:hover img.with-ro,
a:active img.with-ro { display: inline; }

HTML:

<a href="..."><img class="without-ro" src="..." ...><img class="with-ro"
src="..." ...></a>

Els

2006-07-13, 7:15 pm

Harlan Messinger wrote:

[hover styles on images in links]
> However, in IE6 it *doesn't* work, and I'm not sure why. I know IE
> doesn't recognize :hover on elements *other* than A, I expected it to
> work here.

It will, if you declare a general a:hover style as well. IE needs the
trigger on the a:hover, to see the styles for "a:hover element".

The general a:hover style must make a difference compared to the
a:link style though, else it still won't work.

Extended explanation:
http://locusoptimus.com/css-tricker...es-on-hover.php

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Harlan Messinger

2006-07-13, 7:15 pm

Els wrote:
> Harlan Messinger wrote:
>
> [hover styles on images in links]
>
> It will, if you declare a general a:hover style as well. IE needs the
> trigger on the a:hover, to see the styles for "a:hover element".

So weird. I inserted

a:hover { display: inline; }

in front of my other CSS and it works, as you said it would. Thanks.

>
> The general a:hover style must make a difference compared to the
> a:link style though, else it still won't work.
>
> Extended explanation:
> http://locusoptimus.com/css-tricker...es-on-hover.php
>

Johannes Koch

2006-07-13, 7:15 pm

Gabriella wrote:
> Actually what I want to do is have a <a href...> tag with an image that
> changes upon hover (onmouseover).
>
> I am using my css "pro" class as follows:
> <a href="someurl..." class="pro"></a>
> note that it is without content.
> My desire is that upon hover, the image will change.
> Curretnly, I can't even display the primary image...

If there is no linked text (content of the a element), there is nothing
to select at least in non-visual user agents. If the text is in the
image, the image is not purely decorative, and so must not be in the
CSS, but in HTML instead with an appropriate alt attribute.
--
Johannes Koch
Spem in alium nunquam habui praeter in te, Deus Israel.
(Thomas Tallis, 40-part motet)