...

View Full Version : CSS3: How do I set opacity on a background without affecting everything?



TogetherWeRise
06-08-2012, 01:34 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rubalcava Landscaping</title>


<style>
body {
margin: 0px;
padding: 0px;
background-image: url(landscapebackground.jpg);
}

#wrapper {
width: 700px;
margin: 0px auto;
padding: 30px;
border-left: 1px dotted #FFF;
border-right: 1px dotted #FFF;
background-color: #000;
opacity:0.6;
filter:alpha(opacity=60);
}

#logobox {
width: 260px;
float: left;
}

#logo {
font-family: "Times New Roman", Times, serif;
font-size: 42px;
font-variant: small-caps;
color: #FFF;
}

#navbar {
float: right;
width: 400px;
margin-top: 43px;
}

#navbar ul{
list-style: none;
margin: 0px;
padding: 0px;
}

#navbar ul li{
display: inline;
float: right;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
padding-left: 20px;
}

#navbar ul li a {
font-family: "Times New Roman", Times, serif;
text-decoration: none;
font-size: 23px;
color: #FFF;
font-variant: small-caps;
padding-left: 10px;
border-left: 1px solid #FFF;
-webkit-transition: color 0.4s ease;
-moz-transition: color 0.4s ease;
-o-transition: color 0.4s ease;
transition: color 0.4s ease;

}

#navbar ul li a:hover {
color: #BCE041;
border-left: 1px solid;
}




















#banner {
width: 700px;
height: 250px;
border: 1px dotted #FFF;
margin: 0px auto;
margin-top: 20px;
margin-bottom: 20px;
}

#backgroundinfo {
width: 350px;
float: left;
}

#backgroundinfo p {
font-family: Times "Times New Roman", Times, serif;
color: #FFF;
}

#backgroundinfopicture {
width: 300px;
float: right;
border: 1px dotted #FFF;
height: 300px;
}









#contact {
width: 300px;
margin: 0px auto;
margin-top: 40px;
margin-bottom: 50px;
text-align: center;
}

#contactinfo {
font-family: "Times New Roman", Times, serif;
font-size: 24px;
color: #FFF;
font-variant: small-caps;

}

hr {
border-style: dotted;
color: #FFF;
}


cite {
float: right;
color: #FFF;
font-family: "Times New Roman", Times, serif;
}

</style>
</head>




<body>
<div id="wrapper">

<div id="header">
<div id="logobox">
<span id="logo"><img src="logo.png" width="329" height="139" /></span>
</div>

<div id="navbar">
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>

<div class="spacer" style="clear: both;"></div>
</div> <!-- end header -->

<div id="body">
<div id="banner">

</div>

<div id="backgroundinfo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies dui at quam malesuada posuere. Proin congue tellus id ipsum rhoncus suscipit. Pellentesque ante dui, molestie sagittis ullamcorper vel, placerat vel lacus. In adipiscing, dolor et commodo imperdiet, elit eros porta elit, bibendum vestibulum elit orci a ligula. Morbi lacinia diam ut diam eleifend et ullamcorper magna cursus. Nam at nibh id nulla eleifend fermentum. Nullam quis ante nibh. Ut in justo augue, vitae sollicitudin nunc. Proin ultricies justo sit amet mauris accumsan blandit. Sed nec nunc ac sem feugiat condimentum vitae ut mi. Vivamus eget odio quis lorem rhoncus gravida. Cras accumsan elementum nisl, ut accumsan diam vulputate eu. Nam sit amet leo tortor. Nullam at tortor felis, non fermentum leo.</p>
</div>

<div id="backgroundinfopicture">

</div>
<div class="spacer" style="clear: both;"></div>



<div id="footer">
<div id="contact">
<span id="contactinfo">Feel free to call us at <br />
(408) 718-0467 or e-mail us <br />
at jairorubalcava@gmail.com</span>
</div>
<hr />
<cite>&copy;2012 Jairo Rubalcava</cite>

</div>
</div> <!-- end body -->

</div>


</body>
</html>


I want the background of the wrapper to have a low opacity so we can get a glimpse of the background, however, when i set this, absolutely everything within the wrapper container (logo, text, etc) gets this change. how can I set it so that just the background of the wrapper (the black square) gets this opacity change, and everything else inside it remains the same?

Thank You!

waxdoc
06-08-2012, 04:11 AM
Not sure of the fine points, but I use alpha percentage (zero to one) of white:

background-color: rgba(255,255,255, 0.50):

Riku
06-08-2012, 11:59 AM
You can also make black PNG image with low opacity and set it as BG on repeat. You can make the image 1x1 pixel as long as you repeat it X and Y. Probably the easiest way to get it work.

-Riku

Will Bontrager
06-08-2012, 03:48 PM
An alternative is to place a div with background-color:transparent; over the top of a div with background-color:#000; opacity:0.6; filter:alpha(opacity=60);

Will



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum