asked on 12/16/2008

Overlaying PNG placement

Hey, I am trying to create the main image at my site: www.ryancoughlin.com in to a PNG overlay. Where you see the tagline under the header, I am going to create a transparent PNG then write the text. I know how to do all of that, the CSS opacity, but I am confused on how I would get an element where it is now.

I would set the z-index: 3; say, but how to get that element at the same position on top.

Thank you!

Ryan

CSS

Last Comment

catonthecouchproductions

12/16/2008

sedward5

12/16/2008

There's a couple ways you can do it. You probably want to set both elements to:
position: absolute;

Can also move them around like so:
top: -30px
left: 15px

catonthecouchproductions

12/16/2008

ASKER

I was thinking about that method, but I wasn't sure if there was a more appropriate method.

ASKER CERTIFIED SOLUTION

Rikus_Trent

12/16/2008

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

sedward5

12/16/2008

Yeah, in terms of best practice those are really the only two ways to overlay objects (without nesting them).

catonthecouchproductions

12/16/2008

ASKER

I have this so far:

#imageContainer{
width:538px;
height:258px;
}
#imageContainer #imageOverlay{
width:538px;
height:38px;
background-image: url("images/png-overlay.png");
background-repeat: no-repeat;
margin-top:-60px;
border: 1px solid #FF000;
z-index: 1000;
}
#imageContainer #imageOverlay span.overlay-text{
font-size: 140%;
font-weight: bold;
text-transform: lowercase;
letter-spacing: -2px;
padding: 0 0 0 5px;
}

And my HTML is below. If you go to my site now, it is not showing the png-overlay image I have. Any ideas?

Thanks,

Ryan

<div id="imageContainer">
    		<a href="http://www.ryancoughlin.com/index.php" title="Go Home"><img id="mainImage" src="<?php bloginfo('template_url'); ?>/images/landSCAPE.jpg" alt="Ryan Coughlin - Web and Graphic Designer" /></a>
    		<div id="imageOverlay"><span class="overlay-text">My name is Ryan Coughlin and I am a Web and Graphic Designer. Its what I love to do.</span></div>
   		</div>

Open in new window

SOLUTION

sedward5

12/16/2008

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

catonthecouchproductions

12/16/2008

ASKER

Thank you both for your help!

Ryan