Jump to content
Stef's Coding Community
blowfly123

Any way to overlay a transparent image entirely from the stylesheet?

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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;

}

 

image.jpg

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by blowfly123

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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:

Screenshot_2.png

looks good. The PNG frame gets dropped in place so that the jpg shows through the window...

 

and here's ff:

Screenshot_1.png

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.

Share this post


Link to post
Share on other sites

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 by blowfly123

Share this post


Link to post
Share on other sites

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 by Eric

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  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.

Loading...

×
×
  • Create New...