homepage Welcome to WebmasterWorld Guest from 54.166.65.9
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How to make background image transparent
transparency
fendy




msg:3715174
 10:52 pm on Aug 4, 2008 (gmt 0)

I have just a small tile that I set to background-repeat:repeat; and I tried with gif amd png

With gif the transparency works but the text is also transparent above the image

this is the div where I include the backgorund image

.node {
padding-top: 15;
padding-right: 0px;
padding-bottom: 15;
padding-left: 0;
background-image:url(images/nodebackground.png);
background-repeat:repeat;
float:left;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;
filter: Alpha(Opacity=25;
}

So can somebody explain how to make it transparent, but only the image not the text - does it work with png or gif?

thanks

 

Fotiman




msg:3715698
 2:32 pm on Aug 5, 2008 (gmt 0)

You can't set only the background image to be transparent (via opacity). Setting opacity will apply to the entire node, including background and foreground.

Marshall




msg:3715887
 5:19 pm on Aug 5, 2008 (gmt 0)

The best thing you can do is lighten the picture part of the image in some photo program and leave the text as dark as you want. If you are using a .png image, be aware that IE6 makes transparent areas grey. So if you can, have a background color in the image even if it is white.

Marshall

fendy




msg:3715949
 6:26 pm on Aug 5, 2008 (gmt 0)

Just as I though so, too bad it does not work

It does not work even with 50% opacity of gif?

Is that true

D_Blackwell




msg:3716036
 8:33 pm on Aug 5, 2008 (gmt 0)

As Marshall indicated, using an image editing program and reducing the opacity should allow you to 'lighten' the image to any degree that you like, and that darker text should lay right over top very nicely.

I usually use (or convert) .jpgs (.png are not ready for 'prime time' yet). Don't use a lot of .gifs when working with my own images. What is the background color of the .gif - does it have one or is it fully transparent already? I would suggest continuing to practice and work with various options.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved