<img src="... as a background image?

[johnyboy]

an image that is content, so should be there for non css users, i want to have as a background image for viewers using css. is there a way to make an <img src="... type of image a background image so that something else i've got can go over it, or should i use display:none for the image in the css and put the same image in as a background image in the normal css way?

also if the answer is use display:none for the img then put the image in as a background image using css, if there's nothing suitable in the html now to use to attach the background css command to what can i put into the html that would allow me to do that -- just an empty div or something? what would be best for that?

thanks.

[RetroNetro]

Hello

I would use the empty division method and set it as a background image for that division.

Then you can type text over it and it won't be an empty division anymore

Hope it helps.

[johnyboy]

and have <img src="... in the html and use display:none on it? bearing in mind the image is important to the content. yes i suppose that's how it should be done if there's no way to make a image that's in the html a background image. ok thanks.

[RetroNetro]

Hello

Well, if the image is important to the content. I would include it in the html with:

<img src="" width="" height=" alt="" />

and use CSS to position it within the site as needed.

Keep in mind I am not sure what exactly you are attempting.

[johnyboy]

i'm trying to get an image that is important to content as a background image so stuff goes over it, so the question is should the <img src be turned off and the image placed as a background in the css, or should (can it even) the css turn the <img src into a background image somehow?

you know how stuff goes over a background image quite happily -- that's what i want but the image is part of the content so it can simply be an image applied using background in css because then non css viewers would never see the image. if it's possible to turn a <img src into a background image how?

thanks

[briansol]

^ Right.

If the image IS content (say, a graph or a picture of the author), not just to make things pretty, it should be included in regular <img /> tags.

If you want it as a background image for CSS-capabale user agents, perhaps, then, this image is not CONTENT, but rather, STYLE, and should only be included as a background image of an element.

[johnyboy]

having text over an image does not make it not content. that's what i've got -- an image that's content that i need to put some text over.

the only way i know how to do this, which is what i'll use but i was wondering if there was a better way, is to include the image in the html but turn it off with display:none and put the image in as a background image in the css. or is there a way to make an image that's in html like a background image?

[briansol]

Sounds like you're trying to caption an image like this:

------------------------------
|
|
|
|
| text over image here... 
|
|--------------------------------

if that's the case, this is the markup i would use.

<div class="imagewrapper">
<img src=  . . .  />
<div class="caption">This is some text</div>
<br style="clear:left;" />
</div>

With some neat CSS, you can position the caption as you wish:

div.caption { margin-top: -25px; z-index: 999; }

[johnyboy]

> Sounds like you're trying to caption an image..

yes sort of. i will give your suggestion a go -- thanks very much.

[Paul O'B]

Hi,

You can position any element on top of any other element by adjusting the z-index correctly and placing the elemnts so that they overlap. It doesn't matter if they are foregound or background images as the element can be manipulated anyway.

The elements need to have a position defined so that z-index takes effect (position:relative or position absolute depending on situation).

You would set the parent to have position:relative and then the text could be absolutely placed over the parent without problem.

e.g.
http://www.pmob.co.uk/temp/overlay.htm

Alternatively you could drag the text over the image with negative margins as briansol has done above.

[johnyboy]

right, thanks. i will have a play with those -- see what works best. thanks.