Can an image with transparency overlap two divs

@JackAndrewsFeb 21.2007

I want to create a large div with a 1px border and float a transparent png over the top border so the border shows through the shadow of the image. Is this possible, keeping the div and the image in a fixed position?

For example, let’s say you have a 100px diameter disc png shape with a soft shadow and the disc appears to be over a top border of a rectangle, half the disc above the border, the other half below the border. The disc itself is opaque, but the border below in shows in the shadow areas of the disc.

How could that be done? I’m new to CSS. I have done it with a background image, but without going into the reason why, in this instance, it needs to be a CSS border, not a background image, and the same border must be on all four sides of the div “below”.

to post a comment

CSS

10 Comments(s) _↴

@WebJoelFeb 21.2007 — #I'm lost... can you describe a bit better exactly what you are trying to do? If I understand this, I'd make the 'under DIV' be positioned relative and put the circle opacity image [I]inside[/I] of the DIV but positioned absolute, and furthermore, positioned 50% 'outside/above' the underDIV. Being 'absolute', it will not be affected by any content as it will be 'out of the document flow'..

Attached is an opacity thing that I did... -something like this maybe?

[upl-file uuid=f9b5a14a-06b4-41ce-9382-1d4cddf7a874 size=62kB]testing opacity floating bg image.zip[/upl-file]

@JackAndrewsauthorFeb 21.2007 — #Thanks for your response WebJoel. Here is the URL of a page I want to modify. Above the white td with most of the text, you will see a yellow "plastic" 3D graphic that says, "Arrange Your FREE MOVE..."

This is currently achieved with a background image in the "under" div. However, I found this ( http://www.curveycorners.com ) and I want to use it to round the corners at the bottom instead of the images I use now. One caveat is that this solution requires a border on all sides of a div. Thus, the problem. I hope that is clear. Please let me know, and thanks again. I do not know the relative and absolute styles in CSS and the difference between them. I am very new with CSS.

@JackAndrewsauthorFeb 21.2007 — #Oops! Forgot the reference URL:

http://www.freemovetexas.com/new/arrange_free_move.html

@nlodingFeb 21.2007 — #Sounds like you're just talking about making the shadow of the png like a shadow in real life ... you can make out things in the shadow. That's very possible, if I understand your meaning. It's not CSS, but a PNG attribute, however, it doesn't work in IE 6 or below without some major work arounds.

Create your disc image on a transparent background, adding the drop shadow. If using Photoshop (Google it for any other program), choose File -> Save for Web ... choose PNG-24, with Transparency checked. The shadow will retain is translucency so you can "through" it.

As for cross-browser support, see this:

http://bjorkoy.com/post/show/8

Also, here's a tutorial I just found for what I was talking about:

http://epleweb.com/tutorials/pngtransparency/

@JackAndrewsauthorFeb 21.2007 — #Thanks but the png transparency isn't my problem. I have already created that as you see in my URL above. I found and use this neat little js and it works in IE6:

http://homepage.ntlworld.com/bobosola/pnghowto.htm

My problem is creating the css for the image over the border of the div. I don't know a. if it can be done and, b. how to do it. --- How do I get one div containing the transparent shadow to position over the top border of another div? That's my question.

@felgallFeb 21.2007 — #See http://www.felgall.com/cshow09.htm for how to align one div over another so they move together.

@WebJoelFeb 21.2007 — #I'll terrible with images so for this quick tutorial, I just create a simple GIF (with it's limitations). Here is a quick HTML document, and I'll attach the image that I used (you will of course, use a superior image)..

The important parts are the "<div style="position:[U]RELATIVE[/U]; etc..." and the "<img src="position:[U]ABSOLUTE[/U]; etc etc>" and in this example, the CSS "[U]#content img {opacity etc etc}[/U]" of which, you'd not need if you use a *png.

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
 <html><head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <meta http-equiv="Content-Script-Type" content="text/javascript" />
 <title></title>
 <style type="text/css">
 *	{border:0; padding:0; margin:0;}/* Set everything to "zero" */
 
 body {min-height:100%; height:100%;
 font:x-small Arial, Verdana, sans-serif;
 voice-family: ""}"";voice-family:inherit;
 font-size:small;/*for IE 5.5 */
 } html>body {font-size:small;}
 /*font-size: small; voice-family: ""}"";
 voice-family: inherit; font-size: medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */
 
 p {font-size: 90%; line-height:1.2em; margin-top:10px;}
 h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif;
 font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}
 h1{font-size: 1.93em;}
 h2{font-size: 1.72em;}
 h3{font-size: 1.52em;}
 h4{font-size: 1.42em;}
 h5{font-size: 1.32em;}
 h6{font-size: 1.21em;}
 
 #content img {opacity: .8;
 -moz-opacity: .8; 
 -khtml-opacity: .8; 
 filter:alpha(opacity=80) ;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
 }
 
 </style>
 
 <script type="text/javascript"><!--
 // -->
 </script>
 <link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
 </head>
 <body>
 
 <!-- next: the 'Container DIV' -->
 <div id="content" style="position:relative; width:600px; height:320px; padding:15px 20px; border:4px double #252525; margin:125px auto;">
 <h1>A regular DIV container</h1>
 <h3>This DIV is "position:relative;" and contains your text content.</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
 Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
 volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
 dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
 Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
 mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
 metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
 lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
 turpis at erat.</p>
 
 <p>The image "your_free_move.gif" (terrible that is it, -I don't do image well), is "position:absolute;" and can be 'positioned outside' of the parent DIV (the REALATIVE div) by using "top:-60px" which moves it "sixty pixels up" from the 'top' of the parent.</p>
 
 <p><span style="font-size:1.3em;"><strong>position:absolute; left:260px; top:-60px;</strong> width:365px; height:73px; <u>border:0 none;</u></span>
 
 <br /><br />  is the CSS that does the trick. You need to state "border:0" or "border:0 none;" to prevent a default border from appearing.
 </p>
 
 <p><strong>Try changing the "-60px;" to "-50px;" or "-70px;" and see what happens...</strong></p>
 
 <img src="your_free_move.gif" style="position:absolute; left:260px; top:-60px; width:365px; height:73px; border:0 none;" />
 
 </div><!-- end of the 'container DIV' -->
 
 
 </body>
 </html>[/code]

[upl-file uuid=7f8c5717-6358-40fd-873b-6049a065bff1 size=6kB]your_free_move.gif[/upl-file]

@JackAndrewsauthorFeb 22.2007 — #That's interesting --- how in the world did you do that w/o Flash --- in the js? In my case, I want the image stationary and with a shadow.

@JackAndrewsauthorFeb 22.2007 — #WebJoel. felgall, and nloding: thanks very much to all of you. I'll digest this and report back.

@nlodingFeb 22.2007 — #It's not Flash or Javascript ... it's pure and simple CSS. I like felgall's way better ... all you're doing is absolutely position the elements so that one is on top of the other. Google "CSS absolute positioning" ... that's all there is to it.

Then if you want to change both layers at the same time, that's where the outer <div> comes in that wraps up both layers.

Also in #CSS _↴

colour schemes Margins & Image Sizing issues with IE Want help with making a website responsive...

Success!

Help @JackAndrews spread the word by sharing this article on Twitter...

Tweet This

Can an image with transparency overlap two divs

10 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Can an image with transparency overlap two divs

10 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #CSS _↴