Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16
  1. #1
    Junior Member
    Join Date
    Jan 2006
    Location
    Perth, Australia
    Posts
    22
    Member #
    12343
    Hi all,

    Anyone know a good way to place a trnaparent image (gif or png) OVER content? A table in this example.

    I`ve tried lots of things, and have been centering around the z-index, but it`s not working out so far (sample image always still below the text). sample_2.png is blue so it shows up, and the white sample_3.png is to see if it is truly above the content (should block out some of the text).
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Blah</title>
    <style type="text/css">
    .img {
        position:absolute;
        top:0px;
        right:0px;
        z-index:10;
        width:auto;
        height:auto;
        background:url(sample_2.png);
        }
    </style>
    
    </head>
    <body>
    <div class="img">
    <h2>BLAH BLAH BLAH</h2>
    <table border="1" cellspacing="0" cellpadding="0">
    <tr>
    <td colspan="3">Blah Blah</td>
    <td>blah blah blah blah blah blah blah blah</td>
    <td><img src="button.gif" />blah blah blah blah blah blah blah blah</td>
    <td><img src="button.gif" />blah blah</td></tr>
    <tr><td><img src="button.gif" />blah blah</td>
    <td>blah blah<img src="button.gif" /></td>
    <td>blah blah<img src="button.gif" /></td>
    <td>blah blah<img src="button.gif" /></td>
    <td>blah blah<img src="button.gif" /></td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr>
    <td colspan="3">Blah Blah</td>
    <td>blah blah blah blah blah blah blah blah</td>
    <td>blah blah blah blah blah blah blah blah</td>
    <td>blah blah</td></tr>
    <tr>
    <td colspan="3">Blah Blah</td>
    <td>blah blah blah blah blah blah blah blah</td>
    <td>blah blah blah blah blah blah blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    </table>
    </div>
    </body>
    </html>
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    First thing... The period indicates a class. Remove the period to make it an element style. This period: in the <head><style>[minicode].img[/minicode].

    Next thing... I could be mistaken, but... I'm pretty sure by having the image INSIDE the table, the table content will simply be displaced by the image. You would have to remove the image from the table entirely, give each one it's own ID and position accordingly. The Z-index you have set will make the subsequent style overlap.
    Shani

    I have an eye for detail like you'd never believe.

  4. #3
    Junior Member
    Join Date
    Jan 2006
    Location
    Perth, Australia
    Posts
    22
    Member #
    12343
    Cheers, but tried that before. Doesn`t work I`m afraid.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Blah</title>
    <style type="text/css">
    
    img {
        position:absolute;
        top:0px;
        right:0px;
        z-index:10;
        width:auto;
        height:auto;
        }
    
    </style>
    </head>
    <body>
    
    
    <h2>BLAH BLAH BLAH</h2>
    
    <table border="1" cellspacing="0" cellpadding="0">
    <tr>
    <td colspan="3">Blah Blah</td>
    <td>blah blah blah blah blah blah blah blah</td>
    <td>blah blah blah blah blah blah blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah <img src="sample_2.png" /></td>
    <td>blah blah<img src="sample_2.png" /></td>
    <td>blah blah<img src="sample_2.png" /></td>
    <td>blah blah<img src="sample_2.png" /></td>
    <td>blah blah<img src="sample_2.png" /></td></tr>
    <tr><td>blah blah</td>
    <td>blah blah<img src="sample_2.png" /></td>
    <td>blah blah</td>
    <td>blah blah<img src="sample_2.png" /></td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah<img src="sample_2.png" /></td>
    <td>blah blah</td>
    <td>blah blah<img src="sample_2.png" /></td>
    <td>blah blah</td></tr>
    <tr>
    <td colspan="3">Blah Blah</td>
    <td>blah blah blah blah blah blah blah blah</td>
    <td>blah blah<img src="sample_2.png" /> blah blah blah<img src="sample_2.png" /> blah blah blah</td>
    <td>blah blah</td></tr>
    <tr>
    <td colspan="3">Blah Blah</td>
    <td>blah blah blah blah blah<img src="sample_2.png" /> blah blah blah</td>
    <td>blah blah blah bla<img src="sample_2.png" />h blah blah blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah<img src="sample_2.png" /></td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah<img src="sample_2.png" /></td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah<img src="sample_2.png" /></td>
    <td>blah blah</td>
    <td>blah blah<img src="sample_2.png" /></td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah<img src="sample_2.png" /></td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    </table>
    </body>
    </html>

  5. #4
    Junior Member
    Join Date
    Jan 2006
    Location
    Perth, Australia
    Posts
    22
    Member #
    12343
    I`ve put a bg colour on, so that it`s easier to test....

    The sample.png is visible now, but if the z-index is working and it`s on top of the text, the text shouldn`t be visible where the sample.png graphic is. Unfortunately, you can still see the text....

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Blah</title>
    <style type="text/css">
    
    .img {
        position:absolute;
        top:0px;
        right:0px;
        z-index:10;
        width:auto;
        height:auto;
        background:url(sample_3.png);
        background-color:#CCCCCC;
        }
    
    </style>
    </head>
    <body>
    
    <div class="img">
    <h2>BLAH BLAH BLAH</h2>
    
    <table border="1" cellspacing="0" cellpadding="0">
    <tr>
    <td colspan="3">Blah Blah</td>
    <td>blah blah blah blah blah blah blah blah</td>
    <td>blah blah blah blah blah blah blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr>
    <td colspan="3">Blah Blah</td>
    <td>blah blah blah blah blah blah blah blah</td>
    <td>blah blah blah blah blah blah blah blah</td>
    <td>blah blah</td></tr>
    <tr>
    <td colspan="3">Blah Blah</td>
    <td>blah blah blah blah blah blah blah blah</td>
    <td>blah blah blah blah blah blah blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    <tr><td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td>
    <td>blah blah</td></tr>
    </table>
    </div>
    
    
    </body>
    </html>
    Attached Images Attached Images

  6. #5
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Hi stormjuice,

    I think I confused you. The part about removing the period was not speculative. If you want that class for all images, that would be the best way to do it.

    One thing I said that you did not mention trying... remove the image from the table.

    In the example on the above post with the attachment, you have [minicode]<div class="img">the whole table</div>[/minicode]. This basically nulls the z-index since you've now evened it out. That's not what you want to do.

    Tip: Tables can take ids and classes. In the above case, you could have said [minicode]<table class="img">[/minicode] and gotten the same results.

    Try removing the image from the table and seeing what happens. Linking to the html would be better than screenshots.
    Shani

    I have an eye for detail like you'd never believe.

  7. #6
    Junior Member
    Join Date
    Jan 2006
    Location
    Perth, Australia
    Posts
    22
    Member #
    12343
    The part about removing the period was not speculative. If you want that class for all images, that would be the best way to do it.
    I don`t want it for all images, just the one image (in this case over a table, just as a test example). My boss wanted to put a `sample` image over a table in a website he is doing for a school course (we work in the dept. of ed), so that anyone who was looking at the course in it`s unfinished state would know the info in a certain table or area was fake.

    One thing I said that you did not mention trying... remove the image from the table.
    I thought in the last code sample above, it was removed from the table, and applying to the whole page...
    Code:
    <body>
    <div class="img">
    <h2>BLAH BLAH BLAH</h2>
    <table border="1" cellspacing="0" cellpadding="0">
    Initially I was using an image within the table to make it easier for me to see if the z-index image would overlay it (which it didn`t). I got rid of those images and just made the background grey anyway, which is a better way for me to tell if the white image is over the black text.

    In the example on the above post with the attachment, you have <div class="img">the whole table</div>. This basically nulls the z-index since you've now evened it out. That's not what you want to do.
    What do I need to do to get the z-index to work then?

    Tip: Tables can take ids and classes. In the above case, you could have said <table class="img"> and gotten the same results.
    True. I did try that before, but it still didn`t overlay the text. I`ve re-instated it now. As a desperate measure, I even changed the class id, just in case 'img' was reserved. No difference, of course.

    Try removing the image from the table and seeing what happens. Linking to the html would be better than screenshots.
    Still not sure exactly what you mean there. If you mean attaching it to something else in the page, last week I also tried attaching the image to the <h3>, but it still didn`t work (I`ve since killed off the <h3>). Is that what you mean?

    I was just working on it on the local drive, but here it is (as it stands).....

    http://home.exetel.com.au/stormz/blah.html

    I`ve uploaded sample.gif, sample.png, sample_2.png and sample_3.png (sample_3.png is the white one).

    This isn`t a life or death thing, but it would be nice to solve

  8. #7
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Oh! I misunderstood what you are doing. To be honest, I'm still not 100%, but let's see if this will work...

    First of all, if you want the z-index to work, you want to apply it ONLY to the part that should be higher, in this case, the image. Also you probably don't want to have it as a background image.

    HTML Code:
    <table>
       <tr>
          <td><img class="img_trans" src="images/sample_3.png" /> blah blah blah</td>          
          <td><img class="img_trans" src="images/sample_3.png" /> blah blah blah</td>      
          <td><img class="img_trans" src="images/sample_3.png" /> blah blah blah</td>      
          <td><img class="img_trans" src="images/sample_3.png" /> blah blah blah</td>
       </tr>
    </table>
    When I say remove the image from the table, I meant the HTML for the image, not the CSS. In your second example you removed the images from the table and the only one I'm seeing now is sample_3.png, because it's the background image. This is what I meant:
    HTML Code:
    <div class="container">
    <img class="img_tran" src="images/sample_3.png" />
    <table>
       <tr>
          <td>blah blah blah</td>
          <td>blah blah blah</td>
          <td>blah blah blah</td>
          <td>blah blah blah</td>
       </tr>
    </table>
    </div>
    Warning, if you need to place the images individually, you would have to use IDs for each to set the coordinates. And if that is the case, you may as well use CSS for the whole layout.

    I hope this post is more applicable to your project.
    Shani

    I have an eye for detail like you'd never believe.

  9. #8
    Junior Member
    Join Date
    Jan 2006
    Location
    Perth, Australia
    Posts
    22
    Member #
    12343
    Cheers for the input DCScene, but nothings working so far. Interesting though.

    The images are forcing the text down, so not overlaying the text.

    http://home.exetel.com.au/stormz/blah2.html

    http://home.exetel.com.au/stormz/blah3.html

    Maybe this just isn`t possible in CSS, to have a watermark on top of the content?

    Or maybe it is....
    http://www.exclipy.com/css/imageoverlay/index.html

    Or maybe not....

    http://home.exetel.com.au/stormz/blah.html

    Code:
    .img_tran {
        position:relative;
        top:0px;
        right:0px;
        background: transparent url(sample_3.png) repeat top left;
        z-index:10;
        width:auto;
        height:auto;
        background-color:#CCCCCC;
        }
    
    </style>
    </head>
    <body>
    
    <div class="container">
    <div class="img_tran">
    btw how do you colour your code?

  10. #9
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Touche!

    It's completely possible with CSS. It might not be possible with tables! (If someone else knows how, by all means, explain!)

    That's why I said to remove the image (src) from the table.

    Also, I notice the position for the img_tran is now relative, before it was absolute. Try changing it back. Try also setting the table's position to absolute and use the same coordinates. Oh! and add [minicode]position: relative[/minicode] to the container.

    Edit: I am looking at number 3.
    Shani

    I have an eye for detail like you'd never believe.

  11. #10
    ljm
    ljm is offline
    Senior Member ljm's Avatar
    Join Date
    Aug 2006
    Location
    Manchester, England
    Posts
    284
    Member #
    13684
    Liked
    1 times
    It's possible, but I don't think it'll work using a background image. For this method to work you'll need to know the co-ordinates of the bits you want to block, mind you. It's no problem if you use Dreamweaver and its WYSIWYG editor though.

    I've tried it myself here, using your code for tables, and an image with transparent text to show you can see through it:
    http://www.chrisbrewster.co.uk/sample.html

    I created a div (id: imglayer) with a z-index of 5 (just to make sure it goes on top), and positioned it absolutely. The code for this goes anywhere outside the table. I've put it at the bottom. Inside the div, I inserted the image code.

    HTML Code:
    <div id='imglayer'><img src='img/sample.gif' alt='sample' /></div>
    And that's it, it goes on top of the table according to the co-ordinates you defined. View the page source for a better insight.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:09 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com