blowfly123 Posted January 12, 2010 Report Posted January 12, 2010 I want to lay a transparent PNG over some images but because the images are being generated by a WordPress plug-in I can't really add the PNG with html. I want to do something like: .image-box {background:url(img/gradient.png);z-index:1000;position:relative} Or something like that but with the "background" image actually appearing on top of the jpg. Any way that anyone can see to do that? Quote
PicnicTutorials Posted January 13, 2010 Report Posted January 13, 2010 this will probably work... .image-box:before { content:url(image.jpg); position:absolute; } Quote
blowfly123 Posted January 13, 2010 Author Report Posted January 13, 2010 Hey that's great! One thing I should have mentioned is that this is to style some menu buttons and overlaying the PNG is blocking the clickability of the images below. How do I make the :before image not have any interference with the href below? Quote
PicnicTutorials Posted January 13, 2010 Report Posted January 13, 2010 Hey that's great! One thing I should have mentioned is that this is to style some menu buttons and overlaying the PNG is blocking the clickability of the images below. How do I make the :before image not have any interference with the href below? OK, then you could say... a:before { content:url(image.jpg); position:absolute; } Quote
blowfly123 Posted January 13, 2010 Author Report Posted January 13, 2010 Thanks. I had to hack a plugin a little bit to add the extra link (with the class "subpages-overlay") but it's almost working. In FireFox (mac and pc) the overlay image seems shifted about 18px to the right but not in safari, IE, or chrome. If you have a moment nd want to see if you can spot the problem that would be awesome. This is a godaddy preview thing so it's not impossible that the preview feature is screwing it up. It's here: http://tinyurl.com/ykvvpm4 (log in with guest as the username and pass) And the css is at that link plus /wp-content/themes/21c/style.css .subpages-table {width:1006px} .subpages-cell {float:left; text-align:center; padding-top:0px; width:239px; height:271px; margin:5px} .subpages-overlay:before { content:url(img/film-gradient-lg.png); position:absolute; } .subpages-cell, .subpages-cell a {font-family:Helvetica, Geneva, Arial, sans-serif; font-size:small; text-decoration:none; color:#7c98ae} .subpages-cell img{margin: 75px auto;} .subpages-cell a:hover {text-decoration:none; color:#000099} .subpages-text {margin-top:-290px; font-weight:bold} > </pre> <table> Feature Films Live Events Advertising Sports</table> Quote
PicnicTutorials Posted January 13, 2010 Report Posted January 13, 2010 I can't login. You don't have to use another anchor - just use the one already existing. Quote
blowfly123 Posted January 13, 2010 Author Report Posted January 13, 2010 I'm afraid I don't understand. :/ I dropped this in and styled it the way you suggested: . When I tried to just style the 'a' it didn't work for me (maybe conflicting with something in the plug-in, but I would expect this to work too. Maybe I'll try again tomorrow. And the username and password are both 'guest' I just tested it and it worked... Quote
blowfly123 Posted January 14, 2010 Author Report Posted January 14, 2010 (edited) Ok I simplified it a lot. I got rid of the tables and the overall wrapper, plus the extra class in the link. So now it's: .subpages-cell {float:left; text-align:center; padding-top:0px; width:239px; height:271px; margin:5px} .subpages-cell a:before { content:url(img/film-gradient-lg.png); position:absolute;} .subpages-cell {font-family:Helvetica, Geneva, Arial, sans-serif; font-size:small; text-decoration:none; color:#7c98ae} .subpages-cell img{margin: 75px auto;} .subpages-cell a:hover {text-decoration:none; color:#000099} .subpages-text {margin-top:0px; margin-bottom:-20px; font-weight:bold} .subpages-excerpt {margin-top:-20px; width:229px; text-align:left; margin-left:5px; margin-right:5px} Feature Films xxxx Is there some way that firefox handles the absolute position that's different from other browsers? Could it just be interference from the godaddy previewdns junk? It's so strange! Edited January 14, 2010 by blowfly123 Quote
PicnicTutorials Posted January 14, 2010 Report Posted January 14, 2010 OK, give me the same thing, but with the absolute path of your images included. I'm having trouble picturing the exact position of what your after. With your images I'll compare to the other browsers and then hopefully be able to fix FX for you... Quote
blowfly123 Posted January 14, 2010 Author Report Posted January 14, 2010 OK, give me the same thing, but with the absolute path of your images included. I'm having trouble picturing the exact position of what your after. With your images I'll compare to the other browsers and then hopefully be able to fix FX for you... Cool! Here's one of the images that appears in the html: http://tinyurl.com/yfj2cv6 and here's the framing png that gets overlayed in the css: http://tinyurl.com/yhxbvvr just for reference, here's how it looks in all non-FF browsers for me: looks good. The PNG frame gets dropped in place so that the jpg shows through the window... and here's ff: you can see how the frame is shifted, leaving a little space to the right of the photo and just sort of messing things up. Quote
blowfly123 Posted January 14, 2010 Author Report Posted January 14, 2010 also here's a version of the first frame with complete links to images and nothing else, and the problem still exists, so it's not the godaddy preview doing it: http://tinyurl.com/yjucwtr Quote
blowfly123 Posted January 14, 2010 Author Report Posted January 14, 2010 (edited) I've tried a couple of completely revamped methods and am completely driving myself crazy (if you try text2.htm and test3.htm from the above link you'll see them) Edited January 14, 2010 by blowfly123 Quote
PicnicTutorials Posted January 15, 2010 Report Posted January 15, 2010 (edited) Does this give you want your looking for? Try changing the margin to this. Before this change, IE8 looked the same as FX, however Safari looked dif like you wanted. This change seems to make them appear the same. .subpages-cell { margin:5px 10px 5px 0; } Edited January 15, 2010 by Eric Quote
blowfly123 Posted January 15, 2010 Author Report Posted January 15, 2010 It's funny. I added that and it still didn't look right but things did seem to shift around a little. Then I adjusted how the title text is centered and a couple of other minor things and it clicked into place! Thanks! It's funny how interdependent all these settings are. Quote
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.
Note: Your post will require moderator approval before it will be visible.