Results 1 to 13 of 13

Thread: Semi-Transparent Table Background

Hybrid View

  1. #1

    Thread Starter
    Junior Member
    Join Date
    Feb 2006
    Posts
    27

    Talking Semi-Transparent Table Background

    I have tried many different css code and still no luck.

    Here's what i'm looking for. For the Page Background I have and Image, For the tables on top I have there backgrounds set to black. I need the table backgrounds to be about 50% transparent. The images, the text, and the border cannot be transprent only the background of the tables. I'm sure its possibe I just haven't found it yet.

    Thanks,
    TheHolyMessiah

  2. #2
    I'm about to be a PowerPoster!
    Join Date
    Jan 2005
    Location
    Everywhere
    Posts
    13,647

    Re: Semi-Transparent Table Background

    It's not possible, not per se; as opacity affects all of an element including text, there is no background-opacity property as such (although it would be very nice).

    You need to overlay an element containing the text, with no background, over the semi-translucent background element. You would need absolute positioning or some float trickery for this (say, floating the background element but not the text element). Impossible to suggest a concrete solution without seeing your layout and HTML code, but see if you can do something with that.

  3. #3

    Thread Starter
    Junior Member
    Join Date
    Feb 2006
    Posts
    27

    Re: Semi-Transparent Table Background

    I found some using png files, here is and example of what I'm talking about. This page uses a transparent png as a background for the tables and some how it works like its supposed to. So I think on going to go with this it seems to work like I want it to, Thanks anyways.

    Example

    TheHolyMessiah

  4. #4
    I'm about to be a PowerPoster!
    Join Date
    Jan 2005
    Location
    Everywhere
    Posts
    13,647

    Re: Semi-Transparent Table Background

    That's a really neat idea. I never thought of that. Thanks for the link

  5. #5
    New Member
    Join Date
    Jun 2006
    Posts
    3

    Re: Semi-Transparent Table Background

    Im not 100% sure how its done, but I know it is possible, but it seems to only work in Firefox, not IE. I have the tables on myspace set up with a black transparent background. I stumbled apon this thread trying to find a way to get the same effect in Internet Explorer.

    http://www.myspace.com/cbzed101

    Someone on here might be able to view the page source and figure out exactly what lines of code are required to get the effect, but again, it seems to only work correctly in FireFox or mozilla powered browsers.

    BTW, its been about 5 years since I lasted worked with HTML, I've gone to using Dreamweaver or other WYSIWYG editors.

    Also, TheHolyMessiah, I noticed that you get a nice effect with a about 25% transparent background in Firefox, but then in IE the background is 100% transparent.

    If anyone ever figures out a way to get a good transparent effect going in IE let us know.
    Last edited by CBZED101; Jun 28th, 2006 at 11:03 AM.

  6. #6
    PowerPoster JPnyc's Avatar
    Join Date
    Oct 2002
    Location
    Manhattan
    Posts
    3,015

    Re: Semi-Transparent Table Background

    Here ya go.

  7. #7
    New Member
    Join Date
    Jun 2006
    Posts
    3

    Re: Semi-Transparent Table Background

    Quote Originally Posted by JPnyc
    Here ya go.
    Thats pretty much what we're lookin for, just if theres a way to keep the text and images opaque and only have the table background transparent, its gotta be possible, I know it is in FF, but IE doesn't seem to like png table backgrounds.

  8. #8
    PowerPoster JPnyc's Avatar
    Join Date
    Oct 2002
    Location
    Manhattan
    Posts
    3,015

    Re: Semi-Transparent Table Background

    IE doesn't do png transparency. With the css attribute, you can target any element you want. Forget about the png transparency altogether and use CSS.

  9. #9

    Thread Starter
    Junior Member
    Join Date
    Feb 2006
    Posts
    27

    Re: Semi-Transparent Table Background

    According to the example site I posted, it is possible to use transparent png's in IE. But I think its only possible for me because I have IE 7. Thanks for the help.

    TheHolyMessiah

  10. #10

    Thread Starter
    Junior Member
    Join Date
    Feb 2006
    Posts
    27

    Re: Semi-Transparent Table Background

    Sorry to double post, but CBZED101 your myspace works fine on IE 7 and its just what I was looking for. What did you do to get that to work? I would really appreciate it if you could tell me.

    Thanks,
    TheHolyMessiah

  11. #11
    VB6, XHTML & CSS hobbyist Merri's Avatar
    Join Date
    Oct 2002
    Location
    Finland
    Posts
    6,654

    Re: Semi-Transparent Table Background

    It appears to require JavaScript to work, because it didn't work until I allowed "hotget.com" to work with NoScript. I tend not to like to use any JavaScript that drastically changes the look of the site, because design and look is the worry for CSS.

    I first thought CBZED101 only advertised his own site without it actually being related to the topic at all.

  12. #12
    New Member
    Join Date
    Jun 2006
    Posts
    3

    Re: Semi-Transparent Table Background

    Quote Originally Posted by Merri
    I first thought CBZED101 only advertised his own site without it actually being related to the topic at all.
    I was actually a little concerned that someone would think that when I first decided to use my page as an example.

    Quote Originally Posted by Merri
    because it didn't work until I allowed "hotget.com" to work with NoScript.
    The thing with hotget.com and the noscript thing is caused by that music video I have on my page, as far as I know. I haven't worked with HTML or any language for a few years, but when setting up my page I put in a music video and I noticed when I was removing the control bar from the media player, it had a "noscript" parameter defined. The actuall style of the page looks to be all done with CSS.

    Quote Originally Posted by TheHolyMessiah
    What did you do to get that to work? I would really appreciate it if you could tell me.
    I wish I knew exactly how it works, but Im not sure, I belive it uses the same idea as what you used on your page, with the transparent PNG images. I used a myspace page-generator to get the look of the page. I looked at the page source and did a search for PNG and found 1 image, opened it in a new browser and it was just a transparent black PNG image. The backgrounds on the tables were all set to "transparent" an the background was set to that PNG image. All appeard to be defined in CSS Script.

    Also, you answerd one of my questions in your post, I was wondering if IE7 was going to allow transparent PNG images.

  13. #13
    VB6, XHTML & CSS hobbyist Merri's Avatar
    Join Date
    Oct 2002
    Location
    Finland
    Posts
    6,654

    Re: Semi-Transparent Table Background

    I made up this example: http://merri.net/xhtml_ja_css/opacity/

    It is also a perfectly valid XHTML page. CSS also validates; CSS for IE hidden within conditional comments wouln't validate, of course. It uses the PNG image technique and a filter for IE6 and below.


    CBZED101: NoScript is an extension to Firefox that disables JavaScript by default. I use it for additional security.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width