Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Transparent Div with non-transparent content... is it possible? 3

Status
Not open for further replies.
TheInsider

TheInsider

Programmer
Jul 17, 2000
796
CA
Hi,

I've got a page with a repeating background image. This page also has a <Div> tag (border) that I want to be slightly transparent so the repeating background image is fully visible around the <Div> tag but only somewhat visible inside the <Div> tag. See below:
Code: 
<div style = "background-color: #FFFFFF; width: 100%; opacity: 0.70; filter: alpha(opacity=70); -moz-opacity: 0.70; border: 1px solid #000040;">
   <div style = "margin: 10px 10px 10px 10px;">
      <div style = "opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0;">
         <h1>This shouldn't be transparent at all!</h1>
         <input type="Submit">
      </div>
   </div>
</div>
The problem is that any content I place in the inner <Div> tag is also displayed at 70% opacity -- buttons, text boxes, etc. However, I don't want this content to be transparent!

TIA
 
Sort by date Sort by votes
To elaborate... if you try the HTML below, you'll see how the text and button are somewhat transparent.
Code: 
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server" style="background-color:blue;">
		<div style = "background-color: #FFFFFF; width: 100%; opacity: 0.70; filter: alpha(opacity=70); -moz-opacity: 0.70; border: 1px solid #000040;">
		   <div style = "margin: 10px 10px 10px 10px;">
			  <div style = "opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0;">
				 <h1>This shouldn't be transparent at all!</h1>
				 <input type="Submit">
			  </div>
		   </div>
		</div>
    </form>
</body>
</html>
I hope this makes sense.
 
Upvote 0 Downvote
Well, I was able to come up with a workaround using z-index.
Code: 
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head runat="server">
	<title>Untitled Page</title>
</head>
<body>
	<form id="form1" runat="server" style="background-color:blue;height:600px;">
		<br />
		<br />
		<br />
		<div style = "background-color: #FFFFFF; width: 100%; opacity: 0.70; filter: alpha(opacity=70); -moz-opacity: 0.70; border: 1px solid #000040;">
		   <div style = "margin: 10px 10px 10px 10px;">
			  <div style = "opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0;">
				 <h1>This shouldn't be transparent at all!</h1>
				 <input type="Submit">
			  </div>
		   </div>
		</div>
		<br />
		<div style="position: relative;">
			<div style="position: absolute; top: 0px; left: 0px; width: 400px; height: 200px; z-index: 2; background-color: #FFFFFF; width: 100%; opacity: 0.70; filter: alpha(opacity=70); -moz-opacity: 0.70; border: 1px solid #000040;">
				&nbsp;
			</div>
			<div style="position: absolute; top: 0px; left: 0px; width: 400px; height: 200px; z-index: 3; margin: 10px 10px 10px 10px; opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0;">
				<h1>This shouldn't be transparent at all!</h1>
				<input type="Submit">
			</div>
		</div>
	</form>
</body>
</html>
Unfortunately, the controls are rendered terribly in IE7... but Firefox looks nice.

So, is this the only way to achieve this effect?
 
Upvote 0 Downvote
More or less. Much simpler is to create a semi transparent background and save it as .png. All modern browsers, including IE7 support png files with alpha transparency. It would fail in IE6 though.

Other than that, your code is too complex. I would use absolute positioning only for the transparency and relative positioning for all else:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server" style="background-color:blue;height:600px;">
        <br />
        <div style="position: relative;">
            <div style="position: absolute; top: 0px; left: 0px; height: 200px; z-index: 1; background-color: #FFFFFF; width: 100%; opacity: 0.70; filter: alpha(opacity=70); -moz-opacity: 0.70; border: 1px solid #000040;"></div>
            <div style="position: relative; z-index: 2; margin: 10px;">
                <h1>This shouldn't be transparent at all!</h1>
                <input type="Submit">
            </div>
        </div>
    </form>
</body>
</html>
Make sure you have a doctype at the top. All browsers should be able to produce this simple code.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
I had a similar issue a few weeks back. I used the PNG solution, and for IE6 used the AlphaImageLoader filter to get the alpha opacity on the BG:

Code: 
#yourBgDiv {
   background: url(yourAlphaOpacityImage.png) repeat;

   _background-image: none;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src=yourAlphaOpacityImage.png);
}

The first line gives all browsers the PNG as a background, then the next two remove it for IE6 and add it back in again with opacity 'enabled'.

If you go down this route, you should probably use conditional comments to include an IE6-only style sheet to avoid validation errors.

Be warned, tough - using this method in IE6 leads to all number of problems such as links not being clickable inside the DIV, text not being selectable, etc. These are all surmountable, but you need to be aware of how to do so.

Also, if you don't know the exact width & height of your container, or you want it to be fully scalable, you'll need to use CSS expressions to get IE6 to emulate a 100% width & height (other browsers do this no problems).

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Another way to do it is to fake it. If you know where the "transparent" <div> will be displayed relative to the background image, you can make a second background image that looks like your repeating one shaded by the div background.

I use this technique on . The green shading behind the site title is provided by a partially transparent png for modern browsers, but IE6- gets a shaded version of the background (cropped slightly to match the photo precisely) instead.

If you think that's too much trouble, you could just go with the png and decide that modern browsers should get the fancy translucent effect, old ones get a solid background. That may be acceptable, provided the text is still legible of course.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Thank you for all of your replies! Vragabond was correct about my code being too complicated. I tried his solution, and it did the trick.
Code: 
<body style="background-image: url('grid.png'); background-repeat: repeat;">
    <form id="form1" runat="server" style="height:600px;">
        <br />
        <div style="position: relative;">
            <div style="position: absolute; top: 0px; left: 0px; height: 200px; z-index: 1; background-color: #FFFFFF; width: 100%; opacity: 0.70; filter: alpha(opacity=70); -moz-opacity: 0.70; border: 1px solid #000040;"></div>
            <div style="position: relative; z-index: 2; margin: 10px;">
                <h1>This shouldn't be transparent at all!</h1>
                <input type="Submit">
            </div>
        </div>
    </form>
</body>
As for the missing DOCTYPE declaration, I have that but decided to excluded it from my snippet above. I'm actually using Visual Web Developer to create ASP.Net pages, so it inserts that automatically when I create a page.

I'm going to try BillyRayPreachersSon's suggestion too, as I've never tried the AlphaImageLoader.

ChrisHunt's suggestion isn't a bad idea -- I actually thought about doing this before I posted here -- but I was concerned about the images not lining up properly.

In any case, these are all good suggestions that could work, so a star for each of you!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
648
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
659
PeDa
PeDa
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
565
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
161
jason.lex
jason.lex

Part and Inventory Search

Sponsor

Back
Top