1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Help with html (semi transperent backgrounds)

Discussion in 'Web Design & Development' started by labdude, Dec 18, 2011.

Thread Status:
Not open for further replies.
Advertisement
  1. labdude

    labdude Thread Starter

    Joined:
    Dec 18, 2011
    Messages:
    17
    Hey, this is my first post.
    I am in school, and I am designing a website-style menu in a computers class. My computers teacher wants me to create a table with semi-transparent backgrounds and opaque text. any suggestions? i also need to know where to put the code within my current code. I'm sorry, I'm new here, but how do I put my coding in a iframe so that you can see it? thanks in advance
     
  2. TechGuy

    TechGuy Administrator

    Joined:
    Feb 12, 1999
    Messages:
    14,340
    First Name:
    Mike
    You can post your code using the [ html ] and [ / html ] or just post a link if you have it up on a site already.

    I think the CSS you're looking for is opacity. Maybe something like:

    background-image: url(...); opacity: 0.5;
     
  3. labdude

    labdude Thread Starter

    Joined:
    Dec 18, 2011
    Messages:
    17
    thanks i will give it a try.
    here is my code. sorry for the lack of indentations
    HTML:
    <html>
    <body ondragstart="return false" onselectstart="return false" link="goldenrod" alink="goldenrod" vlink="goldenrod" style="background: goldenrod url('fork.gif') center no-repeat;">
    <head>
    <title>Menu</title>
    </head>
    <h1 style="text-align:center;background-color:gold;color:purple;">Pauls Place of Pentasodium Triphosphate</h1>
    <hr>
    <table CELLspacing="40" style="filter: alpha (opacity=50);">
    <tr>
    <th colspan="5"><marquee>Starters <a href="http://www.google.com">.</a>
    </marquee></th>
    </tr>
    <tr>
    <td style="color:purple;background-color:gold;text-align:center;font-size:25px;filter: alpha (opacity=50);">Fish stick</td>
    <td>   </td>
    <td style="color:purple;background-color:gold;text-align:center;font-size:25px;">$599.99<td>
    <td>  </td>
    <td style="color:purple;background-color:gold;text-align:center;font-size:25px;"><img src="fishstick.png" height="150" width="150" /></td>
    </tr>
    <tr>
    <td colspan="5" style="color:purple;background-color:gold;text-align:center;font-size:25px;">One wonderfully preserved stick of mystery fish, fried in more perservatives, and served cold</td>
    </tr>
    <tr>
    
     
  4. labdude

    labdude Thread Starter

    Joined:
    Dec 18, 2011
    Messages:
    17
    that is only the first bit of my code. If you need more, then just ask.
     
  5. TechGuy

    TechGuy Administrator

    Joined:
    Feb 12, 1999
    Messages:
    14,340
    First Name:
    Mike
    I see you have a few transparencies already set up there, but they appear to be working... what exactly is it that is showing up differently than you expect?
     
  6. ZWard

    ZWard

    Joined:
    Sep 28, 2011
    Messages:
    36
    I don't have that happening, even in firefox. Could you post the remnants of the code? I would use the png work-around to do it.
     
  7. labdude

    labdude Thread Starter

    Joined:
    Dec 18, 2011
    Messages:
    17
    The transparencies are making everything-including the table text-semi transparent, however i only want the table backgrounds to be semi-transparent. any ideas?
     
  8. labdude

    labdude Thread Starter

    Joined:
    Dec 18, 2011
    Messages:
    17
    do you mean me?
     
  9. labdude

    labdude Thread Starter

    Joined:
    Dec 18, 2011
    Messages:
    17
    do u mean me?*
     
  10. TechGuy

    TechGuy Administrator

    Joined:
    Feb 12, 1999
    Messages:
    14,340
    First Name:
    Mike
    You might want to try something like this:

    background-color:rgba(255,0,0,0.5);

    (The last part being the opacity.)

    Unfortunately, that's only supported with CSS3-compatible browsers... (modern versions of Safari, Firefox, Chrome, and IE9+)
     
  11. labdude

    labdude Thread Starter

    Joined:
    Dec 18, 2011
    Messages:
    17
    Unfortunately, it did not work. but just making sure, i put it under the table style, correct?
     
  12. TechGuy

    TechGuy Administrator

    Joined:
    Feb 12, 1999
    Messages:
    14,340
    First Name:
    Mike
    Correct. So, in the example you provided, you would change your table line to read:

    HTML:
    <table cellspacing="40" style="background-color:rgba(255,255,255,0.5);">
    
    This does work -- but, again, only in CSS3 browsers.
     
  13. TechGuy

    TechGuy Administrator

    Joined:
    Feb 12, 1999
    Messages:
    14,340
    First Name:
    Mike
    Another option, as ZWard mentioned above, would be to set your background-image as a semi-transparent PNG. That would work in more browsers (though not IE6 as it doesn't support PNG transparencies.)
     
  14. labdude

    labdude Thread Starter

    Joined:
    Dec 18, 2011
    Messages:
    17
    It works thanks a lot
     
  15. labdude

    labdude Thread Starter

    Joined:
    Dec 18, 2011
    Messages:
    17
    one more thing- what do the other numbers stand for? I'm assuming the colour, correct?
     
  16. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1031832

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice