[SOLVED] can background-image display over an img tag?

[ifubad]

<div style="background-image: background.png;">
    <img src="mainpic.jpg">
</div>

 

Does a picture within the img tag always sits on top of background images? Can the background image be forced over the img tag?

[Zane]

Does a picture within the img tag always sits on top of background images?

My immediate and instinctive answer is..No

 

Can the background image be forced over the img tag?

This question vexes me because why would you have one perfectly good image tag only to replace it with another non image tag?  Perhaps you use display:none or visibility:hidden to get what your after....maybe

[haku]

You could set a low z-index on the img and it *may* go behind the background image (never tried). But why? I suspect that there may be a(n) easier/better way to do what you are trying, so if you give us more details we may be able to help you come up with a better solution.

[Zane]

The only reason I can see behind this shenanigan is to try to maybe "duct-tape" a watermark on an image, which seems kind of pointless.  If that's what you're after, I'd look at GD Library, but I don't want to assume too much...I'm sure you have your reasoning.

 

 

[ifubad]

why? i was asking myself that also, there must be a better way. LOL...

 

I have a single img tag, a larger version of the image will pop out when hovered, directly over the img tag. I'm using the img tag, cause the element will auto size itself to the image file, if I use any other elements with background-image, I would have to specify the width and height. Correct me if I'm wrong and is there a better way?

 

I tried z-index, does not seem to have any effect on img. Also, just tried visibility: hidden and display: none, when hovered, it flickers constantly, those properties just don't work with img

 

thnx in advance, bak to tinkering...

[haku]

I don't 100% get what you are saying, but try alternating between

display:block;

and

display: none;

 

These may work better for you.

[ifubad]

sorry, it's almost 2am, and I'm falling asleep. let me get some sleep and maybe I can explain it better tomorrow. Zzzzzzz

[ifubad]

ok, let me try to explain this better

 

I want to place a random thumbnail image on a page using the <img> tag, the size of image will vary, when hovered, it will pop up a larger version of the same image, directly over the top and covering the thumbnail image.

 

The reason why I want to use the <img> tag, is that the element will automatically adjust its size to the size of the image file. The problem is, it does not seem possible to display another element directly on top of the <img> tag, and hiding the <img> when hovered, causes it to flicker continuously.

 

Is there is better method to accomplish this?

 

 

 

 

[haku]

Not easy but you can do this:

 

1) Put both images into one div.

2) Set the larger image to display:none

3) Set the position on the div to relative

4) Set the position on the larger image to absolute

5) Position the larger image so it is centered over the div

6) Set a :hover class on the div

7) Set it so that when the div is hovered over, it sets the display on the larger image to block:

 

div:hover image.larger
{
   display: block;
}

 

note: this assumes that the larger image has a classname applied to it of 'larger'

 

I haven't tried this, but it should work with some tweaking. It will be harder to set dynamically, so first just try to get one image working like this, then adjust it afterwards so it will work dynamically.

[ifubad]

cool, works perfect. The only property I had to add is a float to the div so that the div will be only as big as the thumbnail img. Perfect, gonna save this for future reference. thnx

[haku]

No worries, glad it worked. It was 100% pure speculation