How do you make a 20% transparent picture with non transparent forms ontop?

Discussion in 'HTML & Website Design' started by Jaguarjace, Oct 4, 2008.

0
  1. #1
    I'm trying to make a table with a background picture a little transparent which blends with the background and has content ontop that is not transparent.
    Please Help!
     
    Jaguarjace, Oct 4, 2008 IP
  2. Jaguarjace

    Jaguarjace Guest

    Messages:
    52
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    This is the code:

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <title>Home</title>
    </head>

    <body bgcolor="#808080">
    <table border="0" cellspacing="0" width="100%" align="center" cellpadding="0" height="10">
    <tr>
    <td width="100%" style="background-image: url('http://mudd.serveftp.com/muddspace/statics/modules/topperhome.bmp'); opacity: 0.4; filter: alpha(opacity=40)" height="85">
    <table border="0" cellspacing="0" width="100%" cellpadding="0" height="83">
    <tr>
    <td width="100%" height="52">
    <p align="center"><font color="#008000" size="3" face="Arial"><b>Welcome
    To My Profile!</b></font>
    </td>
    </tr>
    </table>
    </table>

    </body>

    </html>
     
    Jaguarjace, Oct 4, 2008 IP
  3. GreatWebSuccess

    GreatWebSuccess Peon

    Messages:
    226
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Maybe the easiest thing to do is make the background image transparent in photoshop and save it as a PNG file
     
    GreatWebSuccess, Oct 4, 2008 IP
  4. Jaguarjace

    Jaguarjace Guest

    Messages:
    52
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    cool Thanks! :D
     
    Jaguarjace, Oct 4, 2008 IP
  5. chelvanweb

    chelvanweb Peon

    Messages:
    16
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    This code really helpful for me thanks Jaguarjace
     
    chelvanweb, Oct 4, 2008 IP
  6. desertst0rm

    desertst0rm Peon

    Messages:
    330
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #6
    OMG! I spent a lot of my time on photoshop just to do that.
     
    desertst0rm, Oct 4, 2008 IP
  7. Jaguarjace

    Jaguarjace Guest

    Messages:
    52
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I found an easyer way of doing this,
    All i had to do was make a div positioned ontop of the transparent background picture and put my writting in the div instead of the transparent picture! :D:D
    make the div like this:

    <div style="position: absolute; left: 240; top: 31; width: 241; height: 22">
    <b><font color="#008000" size="4" face="Arial">
    Welcome to my profile!</font></b>
    </div>

    and try to center it ontop of the picture (This may take some time)
     
    Jaguarjace, Oct 4, 2008 IP