ifubad Posted August 26, 2008 Share Posted August 26, 2008 <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? Quote Link to comment Share on other sites More sharing options...
Zane Posted August 26, 2008 Share Posted August 26, 2008 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 Quote Link to comment Share on other sites More sharing options...
haku Posted August 26, 2008 Share Posted August 26, 2008 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. Quote Link to comment Share on other sites More sharing options...
Zane Posted August 26, 2008 Share Posted August 26, 2008 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. Quote Link to comment Share on other sites More sharing options...
ifubad Posted August 26, 2008 Author Share Posted August 26, 2008 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... Quote Link to comment Share on other sites More sharing options...
haku Posted August 26, 2008 Share Posted August 26, 2008 I don't 100% get what you are saying, but try alternating between display:block; and display: none; These may work better for you. Quote Link to comment Share on other sites More sharing options...
ifubad Posted August 26, 2008 Author Share Posted August 26, 2008 sorry, it's almost 2am, and I'm falling asleep. let me get some sleep and maybe I can explain it better tomorrow. Zzzzzzz Quote Link to comment Share on other sites More sharing options...
ifubad Posted August 27, 2008 Author Share Posted August 27, 2008 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? Quote Link to comment Share on other sites More sharing options...
haku Posted August 27, 2008 Share Posted August 27, 2008 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. Quote Link to comment Share on other sites More sharing options...
ifubad Posted August 27, 2008 Author Share Posted August 27, 2008 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 Quote Link to comment Share on other sites More sharing options...
haku Posted August 27, 2008 Share Posted August 27, 2008 No worries, glad it worked. It was 100% pure speculation Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.