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.

Div table background

Discussion in 'Web Design & Development' started by drummerguy101, Apr 8, 2008.

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

    drummerguy101 Thread Starter

    Joined:
    Aug 13, 2007
    Messages:
    63
    I have created a Div table like this:

    Code:
    <div style="width: 220px; height: 280px; overflow: auto; border: none; background: black;"> contents here</div>
    I want to make the black background semi transparent so that you can still see the main webpage background image but still be able to read the text in the box without having to strain.

    what code do i use and where do i put it?
     
  2. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    The easiest way for you to accomplish this is to make a transparent PNG that you would use as the background image of the DIV. The PNG would have the desired transparency and the page background would show through. Here some sample HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>Black transparent background</title>
    <style type="text/css">
    .transparent-background {
      display: block;
      width: 220px;
      height: 280px;
      margin-right: auto;
      margin-left: auto;
      background-image: url(black-transparent-background.png);
      background-repeat: no-repeat;
      color: white;
    }
    
    </style>
    </head>
    <body style="background-image: url(Water%20lilies.jpg);">
    <div class="transparent-background">This is some text</div>
    </body>
    </html>
    Attached is a screenshot of the above HTML. :)

    Peace...
     

    Attached Files:

  3. TheRobatron

    TheRobatron

    Joined:
    Oct 25, 2007
    Messages:
    551
    If you don't want to use images (which I would recommend you don't because of resizing and loading issues) you can use three CSS tags to ensure cross-browser compatibility:
    Code:
    filter:alpha(opacity=25);
    -moz-opacity:.25;
    opacity:.25;
    
    Those should work for pretty much all modern browsers.
     
  4. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    The PNG I made in my example is really small, like 6kb or something. Since his DIV has a static size, I made the PNG the same size of the DIV so no resizing is needed.

    I've got no issue with using CSS opacity but the problem then becomes applying the opacity ONLY to the background image, which isn't possible unless you do one of two things:
    1. Make the background image a standalone image with the opacity applied (this means using the img tag)
    2. Have two DIVs layered on top of each other, the lower DIV having the opacity applied and the upper DIV having a transparent background. The issue here is positioning the DIVs over each other, which is possible but takes some effort.
    Going with an image is the path of least resistance. :)

    We've discussed backgrounds with opacity many times here so you can search for those threads to re-hash the issues surrounding using CSS only to control the opacity of a background image.

    Peace...
     
  5. TheRobatron

    TheRobatron

    Joined:
    Oct 25, 2007
    Messages:
    551
    I would agree that it's easier and mayber more convinient :), but the CSS is more widely supported. But if people are still using ancient browsers that don't support transparent GIFs, they probably won't notice the difference ;)
     
  6. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    Granted, using CSS for this would be preferred but CSS can't readily do what drummerguy101 is looking to do. What usually happens is people assign a background image to a DIV element and want the background to be transparent, so they apply the opacity styles, as you posted above, to the DIV. That works great until they put text or other content in that DIV and quickly discover the text and other content has the opacity applied as well.

    Personally, I think CSS should be used as appropriate to design the cleanest, most browser compatible sites possible. I don't think CSS use should be "forced" or completely abandoned. Sure, drummerguy101 could go through the hoops that would be required to use CSS only to apply the opacity but I don't think his case really calls for those hoops. :)

    Peace...
     
  7. 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...
Similar Threads - table background
  1. mosassas
    Replies:
    2
    Views:
    630
Thread Status:
Not open for further replies.

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

  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