Jump to content

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


ifubad

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

 

 

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.