Zymic Webmaster Forums

Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > HTML and CSS

ajm

Oct 10 2007, 11:35 PM

Hello,

I am attempting to create a dynamic header using a diagonal pattern above a gradient image. The size of the header varies per the width of the page, so due to my lack of CSS knowledge I have run into transparency issues. At the moment I have a #header which sets up the size and position and repeats the header image across the x axis. The #overlay controls the repetition of the overlay gif and sets the opacity to 15. The overlay div sits inside the header div, and everything displays nicely until I add text. Since everything in the overlay div displays with 15% transparency, the text becomes unreadable. How do I go about making the text with in the overlay not follow the transparency of the div?

Here's some code:

CODE

#overlay {
height: 100%;
-moz-opacity:0.15;
filter:alpha(opacity=15);
background-image: url(overlay.gif);
background-repeat: repeat;
}
#header {
color: #ffffff;
padding: 0px;
height: 100px;
background-image: url(header.jpg);
background-repeat: repeat-x;
}

<div id="header">
     <div id="overlay">
          <img border="0" src="logo.jpg">
          <p> header text </p>
     </div>
</div>

MrTouz

Oct 19 2007, 04:03 PM

ill say.. just in scartch not in coding...

CODE

<div id="header">
     <div id="yourspot">
          <div id="overlay">
               <img border="0" src="logo.jpg">
          </div>
               <p> header text </p>
     </div>
</div>

so the header text is outside the overlay but both overlayed image and text are at the same place. what you can do aswell is put a div to your header text wich you can play with margin-top -left -right -bottom so you can place it anywhere... or also add colors to it or size.. i mean anything

Alex

Oct 19 2007, 04:18 PM

Quite a few divs there, can I see an example image of this?

IamShipon1988

Oct 27 2007, 10:32 PM

I would say, create a new class and define it with opacity equalling 100%.

CODE

#overlay {
height: 100%;
-moz-opacity:0.15;
filter:alpha(opacity=15);
background-image: url(overlay.gif);
background-repeat: repeat;
}
.overlay_txt {
height: 100%;
-moz-opacity:1;
filter:alpha(opacity=100);
}
#header {
color: #ffffff;
padding: 0px;
height: 100px;
background-image: url(header.jpg);
background-repeat: repeat-x;
}

<div id="header">
     <div id="overlay">
          <img border="0" src="logo.jpg">
          <p class="overlay_txt"> header text </p>
     </div>
</div>

Just as a heads up, opacity does not verify on w3. They take it as an unknown variable. I would suggest just using a see-through .PNG file.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.