Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

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

    Code:
    <!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!

  • #2
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    rgba(red,green,blue, alpha)

    Not sure of the fine points, but I use alpha percentage (zero to one) of white:

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

  • #3
    New Coder
    Join Date
    Feb 2012
    Location
    Finland
    Posts
    59
    Thanks
    3
    Thanked 9 Times in 9 Posts
    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

  • #4
    Regular Coder
    Join Date
    Jun 2012
    Location
    Near Chicago, USA
    Posts
    123
    Thanks
    7
    Thanked 19 Times in 19 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •