Web Hosting, Design, & Coding forum

General discussion

Make image see through

I am creating a webpage with HTML. I have an image I would like to use as the background for a table. I would like to make it translucent or see through, so that the image is very faint and the text shows up over it. I tried all my image editors and can't find anything to do that. Any help? Thanks, Kay

Discussion is locked
You are posting a reply to: Make image see through
The posting of advertisements, profanity, or personal attacks is prohibited. Please refer to our CNET Forums policies for details. All submitted content is subject to our Terms of Use.
Track this discussion and email me when there are updates

If you're asking for technical help, please be sure to include all your system info, including operating system, model number, and any other specifics related to the problem. Also please exercise your best judgment when posting in the forums--revealing personal information such as your e-mail address, telephone number, and address is not recommended.

You are reporting the following post: Make image see through
This post has been flagged and will be reviewed by our staff. Thank you for helping us maintain CNET's great community.
Sorry, there was a problem flagging this post. Please try again now or at a later time.
If you believe this post is offensive or violates the CNET Forums' Usage policies, you can report it below (this will not automatically remove the post). Once reported, our moderators will be notified and the post will be reviewed.
Collapse -
Re: Make image see through

In reply to: Make image see through

Kay,
The only type of image that can be semi-transparent is PNG-24, the image type that is the W3C's replacement for the GIF. You can set it as the background using CSS, but it will not appear correctly in Internet Explorer until version 7 comes out.

If the table background you want appears in front of a solid color you could saturate the image with that color (i.e. if it's in front of white make it lighter, in front of blue add blue). Otherwise, if you have Photoshop you'd want to set the layer's opacity to a lower level (recommend below 25% so the text is still readable), choose 'Save For Web...' and choose PNG-24.

In your web page, make a CSS Class:
.table-bg {background-image: url(imagefolder/graphic.png); }

and apply the class to the table:
<table class="table-bg">

Hope this helps. -Jeff

Collapse -
transluscent gif

In reply to: Re: Make image see through

The trick I've used with gifs in the past is to create a 2x2 image. Make the background transparent.

Then fill two pixels in a diagonal with any color of your choice, and leave the other two pixels transparent.

Now save your image as a gif, and use it as a background.

Anything underneath it should show through.

My experience though is that if you use this as the background of a large surface, the page slows down somewhat.

Collapse -
Same basic idea..

In reply to: transluscent gif

Collapse -
Translucent image

In reply to: Same basic idea..

Thanks for the help. I don't have photoshop but after some more searching, I was able to find an image that I could use as background that suited my purposes perfectly without any editing. Kay

Popular Forums

icon
Computer Newbies 10,686 discussions
icon
Computer Help 54,365 discussions
icon
Laptops 21,181 discussions
icon
Networking & Wireless 16,313 discussions
icon
Phones 17,137 discussions
icon
Security 31,287 discussions
icon
TVs & Home Theaters 22,101 discussions
icon
Windows 7 8,164 discussions
icon
Windows 10 2,657 discussions

SMART HOME

This one tip will help you sleep better tonight

A few seconds are all you need to get a better night's rest.