50 users online (1 members and 49 guests)  


  Results 1 to 14 of 14

Related

  1. Transparent Frameset Background.    Forum: HTML Forum
    Replies: 2
  2. Transparent over bg??    Forum: Myspace Forum
    Replies: 3
  3. transparent background from b&w *.ps, *.eps    Forum: Graphics Forum
    Replies: 1
  4. transparent background in framesets    Forum: HTML Forum
    Replies: 10
  1. #1
    rickster45's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2004
    Posts
    3

    Semi Transparent Background

    Does anyone have any experience with semi transparent backgrounds for text areas? Is it standard to have a semitransparent gif or use the alpha statement and call out color reducing it's opacity to say 30%. What I would like is the ability to see the page background image through the text area <div>.

    Something like

    body {
    background: url (images/anything.jpg) no repeat top left;
    margin: 0px;
    }

    #linktext {
    background: url (images/semitransparent.gif) repeat-y;
    width: 150px;
    height: 500px;
    margin: 20px;
    postion: absolute;
    top: 75;
    left: 50;

    Is this the best way to do it?

  2. #2
    krak_d's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Mar 2004
    Location
    Liverpool
    Posts
    166
    Hi rickster45,

    i was playing about with creating semi-transparent backgrounds through CSS a while ago but got stuck so left it alone.

    I got as far as using the following,

    <style type="text/css">
    <!--
    #trans {filter:alpha(opacity=30); background-image: url(trans.jpg);}
    -->
    </style>
    and,

    <table>
    <tr><td id="trans">
    This is lots of text to demonstrate how the transpancy works at 30%...<br>
    This is lots of text to demonstrate how the transpancy works at 30%...<br>
    This is lots of text to demonstrate how the transpancy works at 30%...<br>
    This is lots of text to demonstrate how the transpancy works at 30%...<br>
    This is lots of text to demonstrate how the transpancy works at 30%...<br></td>
    </tr>
    </table>
    but i couldn't figure out how to place text over the image without that too being semi-transparent!

    At the moment i just alter the image in Paint Shop Pro if i want it semi-transparent but if anybody knows the complete solution to this one i too would be most grateful to hear from them!

    krak_d

  3. #3
    rickster45's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2004
    Posts
    3

    Yes you get it

    Thinaks,

    I was afraid I didn't explain it properly, but you understood perfectly. I to am stuck at this juncture, I even tried a different Z index and that didnt work. I know I am missing something simple. But it will make an atractive overlay on a page background picture.

    Rickster

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there rickster45,

    Try this , it resolves krak_d's problem...
    Code:
    <html>
    <head>
    <title>Transparent div</title>
    <style type="text/css">
    <!--
    body {
         background:url(http://hstrial-dbayly.homestead.com/files/dog.jpg) no-repeat top left;
         margin:0;        
     }
    #one {
           background:#ff0000;
         width:200px;
         height:216px;
         filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
         -moz-opacity:0.20; 
         position:absolute;
         top:0;
         left:0;
     }
    #two {
         width:200px;
         height:216px;
         position:absolute;
         top:0;
         left:0;
         font-family:arial;
         font-size:18px;
         color:#ffffff;
         padding:20px;
     }
    //-->
    </style>
    
    </head>
    <body>
    
    <div id="one"></div>
    <div id="two">
    The text has to go in a separate div to the transparent  div. 
    This effect will not work in Opera browsers.
    </div>
    
    </body>
    </html>
    coothead

  5. #5
    rickster45's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2004
    Posts
    3

    Thanks Coot

    Yep, thats the ticket, thanks for the code Coothead. Hey and gotta love that pic..... We are into horses around here I have to try and make that kind of graphic for a friend of mine to cool.

  6. #6
    krak_d's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Mar 2004
    Location
    Liverpool
    Posts
    166

    Thumbs up

    I knew Coothead would supply a complete answer. Outstanding work as usual.

  7. #7
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    &#160;
    &#160;
    &#160;
    &#160;
    &#160;
    &#160;&#160;&#160;&#160;&#160;&#160;You Liverpudlians say the nicest things

  8. #8
    Chema_huipe's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2010
    Posts
    4

    Re: Semi Transparent Background

    Hi I was reading this post and I was wondering if one of you could help me with something that has to do with this subject.
    I am working on a layout that I want to apply an area with a Semi-transparent background

    Im not really good at this so what I got so far is really just guessing and playing around with the html. this is basically what it looks like

    http://i261.photobucket.com/albums/ii72/chemahuipe/photobucket.jpg

    I got it to be semi-transparent, the problem is that the the font along with the pictures withing the area, even the scroll bars also become semi-transparent, how can I fix that?

    Oh, and tell me if you need to see the actual html.
    thank you

  9. #9
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Semi Transparent Background

    Hi there Chema_huipe,

    and a warm welcome to these forums.

    I would suggest that you use a transparent background-image rather than opacity for this project.

    Here is a basic example for you to try...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <base href="http://www.coothead.co.uk/images/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    body {
        background-color:#000;
    }
    #container {
        width:800px;
        height:600px;
        border:2px solid #f93;
        margin:auto;
        background-image:url(autumn.jpg);
     }
    #transparent-box {
        width:380px;
        height:340px;
        padding:10px;
        border:2px solid #000;
        margin:120px auto;
        background-image:url(white40.png); /*this is a white transparent 40% transparent image */
        overflow:auto;
    }
    </style>
    
    <!--[if IE 6]>
    <style type="text/css">
    /* IE 6 does not render the transparent png, but will not be around for much longer */
    #box {
        background-color:#fff;
        background-image:none;
     }
    </style>
    <![endif]-->
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="transparent-box">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p><p>
    Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
    orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
    augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
    interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
    lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
    lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
    Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
    volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
    Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
    metus urna, semper eget, aliquam ac, feugiat nec, massa.
    </p>
    </div>
    
    </div>
    
    </body>
    </html>
    

  10. #10
    Chema_huipe's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2010
    Posts
    4

    Re: Semi Transparent Background

    thank you!

    that looks like it would work out... but I really wouldn't know how to put it into it :-/

    this is it, can you please check it out?

    <style> {}table {border-collapse: separate;}BODY.bodyContent {background-image: url(http://i49.tinypic.com/14uxbv7.jpg);scrollbar-track-color: rgb(78,78,78);scrollbar-darkshadow-color: black;scrollbar-shadow-color: black;scrollbar-highlight-color: rgb(78,78,78);scrollbar-3dlight-color: black;scrollbar-arrow-color: rgb(78,78,78);overflow: hidden;}table {visibility: hidden;}table, td {border: 0px solid;}div.clearfix table td div, td, .rail tr {background-color: transparent ! important;}.clearfix table td div ul li a:link, .clearfix table td div ul li a:visited, .clearfix table td div ul li a:hover, .clearfix table td div ul li a:active, ul li a small {background: transparent ! important;color: gray ! important;}.navigationBar A:link, .navigationBar A:visited, .navigationBar A:hover, .navigationBar A:active, .navigationBar table td {visibility: hidden;}table td br, table table td br {display: none;}.Left_Column br, .Right_Column br, .Containing_Block br, .Containing_Block td br, .friendSpace td br, friendsComments td br {display: inline;}div table, div table td {visibility: visible;background: transparent;}div table div {visibility: visible ! important;}.extendedNetwork, .latestBlogEntry {display: none;}.Containing_Block {visibility: visible;position: relative;}.DummyDIV {height: 1px; line-height: 10px;}.Left_Column {position: absolute;left: -450px;}.Right_Column {visibility: visible;position: relative;left: 124px;}.Left_Column, .Right_Column {width: 540px;height: 390px;overflow: auto;margin-top: -10px;background: black; filter: Alpha(style=0,opacity=50); opacity: 0.5;-moz-opacity:0.20;border: 3px double rgb(78,78,78);}.Heading1 {font-size: 24px;color: gray;}.MyStuff, .Mystuff P {font-size: 12px ! important;font-family: arial;color: gray;text-align: justify;}.Heading1, .MyStuff {margin: 10px;}.BlurbPic {border: 1px solid dimgray;} table td, .btext, .redbtext, td.text table table table table b, .redtext, .blacktext10, p, .Profile, .ContainingBlock, td.text table a:link, td.text table a:visited, td.text table a:hover, td.text table a:active, .ContainingBlock DIV {font-size: 12px;color: gray ! important;font-weight: normal;font-family: Arial;}.Left_Column OBJECT {display: none;}.geekspeak {margin: 10px; display: block;}.Right_Column DIV {visibility: visible;font-size: 12px;font-family: Arial;color: gray ! important;}.NavMenu1 {width: 140px;float: left;margin: 20px 30px 25px 10px;}.NavMenu1 A {display: block;font-style: normal ! important;padding-left: 10px;width: 100%;text-decoration: none ! important;font-family: arial;color: gray ! important;}.Right_Column .NavMenu1 A:hover {background: rgb(78,78,78);color: whitesmoke ! important;text-decoration: none ! important;}.MenuHead {width: 125px;margin-bottom: 10px; font-family: arial;color: gray;border-bottom: 1px solid gray;}.rtct {visibility: visible ! important; position: absolute; top: 0px; left: 0px; background: ;}.rtct A {display: block;width: 91px;height: 91px;font-size: 0px;text-indent: -2000px;} .orangetext15 {display: none;}.friendSpace, .friendsComments {margin-left: 10px;}.friendSpace .btext {text-transform: uppercase; display: block;margin-bottom: 20px;}.friendSpace,.friendSpace table,.friendSpace table table{width: 380px;}.friendsComments, .friendsComments table {width: 380px;}.friendSpace td, .friendSpace table td, .friendSpace table table td {padding: 0px;}.friendSpace table table table, .friendSpace table table table td, .friendSpace table table table td div {width: 70px ! important;}.friendSpace table table table img {width: 70px;}.friendSpace table table img, .friendSpace table table a img, .friendsComments table table a img {filter: progidXImageTransform.Microsoft.Alpha(style=0,opacity=50);-moz-opacity: 0.5;-khtml-opacity: 0.5; opacity: 0.5;}.friendSpace table table a:hover img, .friendsComments table table a:hover img {filter: none;-moz-opacity: 1;-khtml-opacity: 1; opacity: 1;}.friendSpace table table a img, .friendsComments table table a img {border: 1px solid dimgray; }.MSCopyright {font-size: 8px ! important;color: gray;clear: both;border-top: 1px dotted gray;margin: 0px 10px;}</style><div class="rtct"><a href="http://www.msplinks.com/MDFodHRwOi8vcm9idGh1bmRlci5jb20v">View All</a></div><div class="Containing_Block"><div class="DummyDIV"> </div><div class="Left_Column"><div class="Heading1">SEM</div><div class="MyStuff"><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums2&friendID=48256499&view=true"> <p><img align="left" style="margin: 0px 10px 10px 0px ;" src="http://i261.photobucket.com/albums/ii72/chemahuipe/lunapic_126638367327526_1.gif" border="0" alt="Photobucket" /></a> <br /><br />Male <br /> I' Am 21<br /> I play guitar <br /> North America <br /><br /> so yeah yes indeed this is working and yup well this is the beggining of a great layout y friend yup well enjoy you're stay at this ospedaje, there are cookies pizza chease burgers and all ofthat junk that clogs every important part of youre body that you need to stay alive, ahha but that doesnt matter.. to you. well thats about it yeah and well remember don't be a stranger incourage children to come by or something like that.<br /><br /> <a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlJmZyaWVuZGlkPTExNzE5NTkxOQ==" target="_blank"><img align="left" style="margin: 0px 10px 10px 0px ;" src="http://i261.photobucket.com/albums/ii72/chemahuipe/lunapic-125343587154938ACTUALIMAGET.gif" border="0" alt="indian" /></a> font now works on second image by adding a renglon spacer after it like this one<br /><br /> yup you know </div></div></div><div class=""><div class="right_Column"><div class="geekspeak"><<z>!-- NETWORK INFORMATION : BEGIN --<z>></div><div class="MenuHead">MY MUSIC</div><img style="visibility:hidden;width:0px;height:0px;" border="0" width="0" height="0" src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.11NXC/bT*xJmx*PTEyNjgwODAwNjAzMjgmcHQ9MTI2ODA4MDA2OTcxOCZwPTY5NDMwMSZkPSZnPTEmb2Y9MA==.gif" /><div style="text-align: left; margin-left: auto; visibility:visible; margin-right: auto; width:450px;"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="270" width="435" style="width:280px; visibility:visible; height:230px;" border="0">
    <param name="allowScriptAccess" value="never" />
    <param name="allowNetworking" value="internal" />
    <param name="movie" 3D1268080058&wid=os" />
    </object></div><div class="NavMenu1"><div class="MenuHead">DO IT TO ME</div><br /><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums2&friendID=48256499&view=true">View My Pics</a><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVzc2FnZSZmcmllbmRJRD00ODI1NjQ5OQ==">Message Me</a><a href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kSUQ9NDgyNTY0OTk=">View My Blog</a><a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD00ODI1NjQ5OQ==">Add Me</a><a href="http://www.msplinks.com/MDFodHRwOi8vZ3JvdXBzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWdyb3Vwcy5hZGR0b2dyb3VwJmZyaWVuZElEPTQ4MjU2NDk5">Add to Group</a><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwuZm9yd2FyZCZmcmllbmRJRD00ODI1NjQ5OSZmPWZvcndhcmRwcm9maWxl">Forward</a><a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLmFkZFRvRmF2b3JpdGUmZnJpZW5kSUQ9NDgyNTY0OTkmcHVibGljPTA=">Favorites</a><a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1SYXRlSW1hZ2UuVXNlclJhdGluZyZVc2VySUQ9NDgyNTY0OTk=">Rate</a><br /><br /><div class="MenuHead FriendsData">Other stuff</div><a class="FriendsData" href="http://www.msplinks.com/MDFodHRwOi8vcm9idGh1bmRlci5jb20v"></a></div><div class="MSCopyright"> MySpace. All Rights Reserved.</div><table style="display: none;"><tr><td><table><tr><td>

  11. #11
    Chema_huipe's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2010
    Posts
    4

    Re: Semi Transparent Background

    any luck?

  12. #12
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Semi Transparent Background

    Hi there Chema_huipe,
    any luck?
    I am afraid that luck does not come into.

    Did you really expect anyone to try and unravel that mess you presented in your previous post?

    I certainly will not even look at any code that is not presented in an orderly fashion.

    "Debugging Tag Soup is an order of magnitude harder. It’s also not terribly rewarding. Some of us are good at it; many of us have been around long enough to have dealt with it at one point or another. But it’s not where we like to focus our energies. There’s nothing aesthetically pleasing or intellectually satisfying about helping a hack-and-slash coder tweak their shitty markup and bludgeon a few browsers into submission. We know it’ll only break again next week; we’ve been there, we know what happens next week. We know you’re just coding on borrowed time".
    This link will explain further why help is not forthcoming....
    Last edited by coothead; 04-06-2010 at 11:46 AM.

  13. #13
    Chema_huipe's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2010
    Posts
    4

    Re: Semi Transparent Background

    oh, i see thank you.


    well like I said I really dont know anything about this I just found this code on the web and thats what it looked like so I am not really sure how to change anything. sorry,
    and well before I posted here I tested it on this page:
    http://www.play-hookey.com/htmltest/

    it worked fine for me. maybe you can show me how?

  14. #14
    shariq222's Avatar
    Junior Member

    Status
    Offline
    Join Date
    May 2009
    Posts
    27

    Re: Semi Transparent Background

    Use png transparency .
    Create a png background with semitransparency .
    Use repeat x-y .



Tags for this Thread