• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 568
  • Last Modified:

How to make a CSS page with a half trasparent background?

OK, I have a page that I need to design... it has a picture located bottom right that will never move over a black BG.  Then, there is a div running down the middle of the page, centered, which will scroll over the BG image.  I woudl like this to be at 50-75% opacity...  any ideas on how to accomplish this?
0
14_east
Asked:
14_east
  • 5
  • 2
1 Solution
 
hankknightCommented:
<!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>
<title>Demo</title>
<style type="text/css">

.content {
 background: #111;
 opacity: .51;
 width: 300px;
 margin: 0 auto;
 color: #fff;
}

</style>
</head>
<body>
 <div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet dolor vitae neque volutpat imperdiet. Maecenas dignissim ante sit amet elit lobortis laoreet. Aliquam sollicitudin suscipit leo vel feugiat. Duis mauris sem, accumsan vel dictum eget, imperdiet id risus. Mauris aliquam tempus auctor. Nulla ullamcorper, ipsum ut luctus semper, ligula mauris pretium neque, at rhoncus mi mauris vitae felis. Nam eu justo enim. Nunc id ligula vel sapien posuere sodales. Aliquam tortor eros, facilisis sed lobortis nec, ornare ac orci. Nunc sed nulla lectus, eget porttitor sem.</p>
 </div>
</body>
</html>

Open in new window

0
 
14_eastAuthor Commented:
I just loaded up that HTML... it seems to be only a black DIV on a white BG with white text?
0
 
14_eastAuthor Commented:
Here's what I got... the image for the background of body is supposed to be anchored bottom right - and it repeats.  Also, the opacity is supposed to be a .51%, but obviosly it is solid?


<!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>
<style type="text/css">
html { height: 100%; }

body {
 height: 100%; 
 margin: 0px; 
 padding: 0px;
 background-image:url(../images/BGgirl.jpg);
 background-attachment:fixed;
 background-position: right bottom;
}

.content {
 background: #111;
 opacity: .51;
 width: 800px;
 margin: 0 auto;
 color: #fff;
 padding-right: 20px; 
 padding-left: 20px;
}
</style>
<title>Demo</title>

</head>
<body>
   <!--- Content Begin --->
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida, purus vitae tempus tincidunt, orci nisl faucibus tortor, et sollicitudin ipsum elit ut risus. Maecenas massa arcu, volutpat in euismod nec, eleifend nec libero. Pellentesque elit odio, placerat eget congue vel, dapibus nec nisi. Cras id sem felis. Sed quis nisl sit amet sapien pulvinar congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean fermentum egestas libero, ullamcorper egestas tortor semper ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis arcu dolor, eu egestas nunc. Vestibulum luctus nulla semper sapien dictum interdum. Sed vel arcu elit. Aenean pellentesque odio vel nulla adipiscing eleifend in quis lacus. Ut commodo tincidunt quam, in imperdiet neque lacinia sit amet. Mauris dapibus condimentum diam nec hendrerit.</p>
     <p>Nullam metus nisl, elementum non ornare placerat, dapibus sed purus. Phasellus vel nulla lacus. Aenean malesuada erat nec ipsum consectetur aliquam. Pellentesque semper massa ac purus commodo et accumsan nisl pellentesque. Integer semper lobortis enim quis fringilla. Mauris lacinia risus quis ante scelerisque iaculis. Nullam at turpis a elit venenatis suscipit. Morbi consectetur, metus vel sodales semper, nulla tellus malesuada lectus, tincidunt viverra risus diam et elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed aliquam tincidunt velit, eget pretium urna blandit sit amet. Aliquam aliquam, tellus et dignissim dapibus, justo nisl sodales velit, eu condimentum tellus est ut risus. Nam id magna vel est cursus imperdiet at eu est. Mauris feugiat felis lacinia nibh hendrerit viverra.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida, purus vitae tempus tincidunt, orci nisl faucibus tortor, et sollicitudin ipsum elit ut risus. Maecenas massa arcu, volutpat in euismod nec, eleifend nec libero. Pellentesque elit odio, placerat eget congue vel, dapibus nec nisi. Cras id sem felis. Sed quis nisl sit amet sapien pulvinar congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean fermentum egestas libero, ullamcorper egestas tortor semper ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis arcu dolor, eu egestas nunc. Vestibulum luctus nulla semper sapien dictum interdum. Sed vel arcu elit. Aenean pellentesque odio vel nulla adipiscing eleifend in quis lacus. Ut commodo tincidunt quam, in imperdiet neque lacinia sit amet. Mauris dapibus condimentum diam nec hendrerit.</p>
     <p>Nullam metus nisl, elementum non ornare placerat, dapibus sed purus. Phasellus vel nulla lacus. Aenean malesuada erat nec ipsum consectetur aliquam. Pellentesque semper massa ac purus commodo et accumsan nisl pellentesque. Integer semper lobortis enim quis fringilla. Mauris lacinia risus quis ante scelerisque iaculis. Nullam at turpis a elit venenatis suscipit. Morbi consectetur, metus vel sodales semper, nulla tellus malesuada lectus, tincidunt viverra risus diam et elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed aliquam tincidunt velit, eget pretium urna blandit sit amet. Aliquam aliquam, tellus et dignissim dapibus, justo nisl sodales velit, eu condimentum tellus est ut risus. Nam id magna vel est cursus imperdiet at eu est. Mauris feugiat felis lacinia nibh hendrerit viverra.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida, purus vitae tempus tincidunt, orci nisl faucibus tortor, et sollicitudin ipsum elit ut risus. Maecenas massa arcu, volutpat in euismod nec, eleifend nec libero. Pellentesque elit odio, placerat eget congue vel, dapibus nec nisi. Cras id sem felis. Sed quis nisl sit amet sapien pulvinar congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean fermentum egestas libero, ullamcorper egestas tortor semper ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis arcu dolor, eu egestas nunc. Vestibulum luctus nulla semper sapien dictum interdum. Sed vel arcu elit. Aenean pellentesque odio vel nulla adipiscing eleifend in quis lacus. Ut commodo tincidunt quam, in imperdiet neque lacinia sit amet. Mauris dapibus condimentum diam nec hendrerit.</p>
     <p>Nullam metus nisl, elementum non ornare placerat, dapibus sed purus. Phasellus vel nulla lacus. Aenean malesuada erat nec ipsum consectetur aliquam. Pellentesque semper massa ac purus commodo et accumsan nisl pellentesque. Integer semper lobortis enim quis fringilla. Mauris lacinia risus quis ante scelerisque iaculis. Nullam at turpis a elit venenatis suscipit. Morbi consectetur, metus vel sodales semper, nulla tellus malesuada lectus, tincidunt viverra risus diam et elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed aliquam tincidunt velit, eget pretium urna blandit sit amet. Aliquam aliquam, tellus et dignissim dapibus, justo nisl sodales velit, eu condimentum tellus est ut risus. Nam id magna vel est cursus imperdiet at eu est. Mauris feugiat felis lacinia nibh hendrerit viverra.</p>
</div>

</body>
</html>

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
14_eastAuthor Commented:
OK, so the opacity thing is fine in Firefox, but not in IE9!
0
 
14_eastAuthor Commented:
UPDATE!!  I have everythning working but the opacity in IE?  Perhaps I should just use a little 50% PNG as a background?
0
 
hankknightCommented:
For maximum compatibility you should use a PNG image with an alpha transparency.

PNG with Alpha Transparency
If you tell me the exact color and opacity you need I can create a custom image for you.

Here is an example.  I tested this in Firefox, Chrome and IE 7, 8 and 9:

<!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>
<style type="text/css">
html { height: 100%; }

body {
 height: 100%; 
 margin: 0px; 
 padding: 0px;
 background-image:url(http://www.experts-exchange.com/images/experts-exchange/experts-exchange-logo.png);
 background-attachment:fixed;
 background-position: right bottom;
}

.content {
 background: transparent url(http://filedb.experts-exchange.com/incoming/2012/09_w36/600647/alpha.png) repeat scroll 0 0;
 width: 800px;
 margin: 0 auto;
 color: #fff;
 padding-right: 20px; 
 padding-left: 20px;
}
</style>
<title>Demo</title>

</head>
<body>
   <!--- Content Begin --->
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida, purus vitae tempus tincidunt, orci nisl faucibus tortor, et sollicitudin ipsum elit ut risus. Maecenas massa arcu, volutpat in euismod nec, eleifend nec libero. Pellentesque elit odio, placerat eget congue vel, dapibus nec nisi. Cras id sem felis. Sed quis nisl sit amet sapien pulvinar congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean fermentum egestas libero, ullamcorper egestas tortor semper ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis arcu dolor, eu egestas nunc. Vestibulum luctus nulla semper sapien dictum interdum. Sed vel arcu elit. Aenean pellentesque odio vel nulla adipiscing eleifend in quis lacus. Ut commodo tincidunt quam, in imperdiet neque lacinia sit amet. Mauris dapibus condimentum diam nec hendrerit.</p>
     <p>Nullam metus nisl, elementum non ornare placerat, dapibus sed purus. Phasellus vel nulla lacus. Aenean malesuada erat nec ipsum consectetur aliquam. Pellentesque semper massa ac purus commodo et accumsan nisl pellentesque. Integer semper lobortis enim quis fringilla. Mauris lacinia risus quis ante scelerisque iaculis. Nullam at turpis a elit venenatis suscipit. Morbi consectetur, metus vel sodales semper, nulla tellus malesuada lectus, tincidunt viverra risus diam et elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed aliquam tincidunt velit, eget pretium urna blandit sit amet. Aliquam aliquam, tellus et dignissim dapibus, justo nisl sodales velit, eu condimentum tellus est ut risus. Nam id magna vel est cursus imperdiet at eu est. Mauris feugiat felis lacinia nibh hendrerit viverra.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida, purus vitae tempus tincidunt, orci nisl faucibus tortor, et sollicitudin ipsum elit ut risus. Maecenas massa arcu, volutpat in euismod nec, eleifend nec libero. Pellentesque elit odio, placerat eget congue vel, dapibus nec nisi. Cras id sem felis. Sed quis nisl sit amet sapien pulvinar congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean fermentum egestas libero, ullamcorper egestas tortor semper ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis arcu dolor, eu egestas nunc. Vestibulum luctus nulla semper sapien dictum interdum. Sed vel arcu elit. Aenean pellentesque odio vel nulla adipiscing eleifend in quis lacus. Ut commodo tincidunt quam, in imperdiet neque lacinia sit amet. Mauris dapibus condimentum diam nec hendrerit.</p>
     <p>Nullam metus nisl, elementum non ornare placerat, dapibus sed purus. Phasellus vel nulla lacus. Aenean malesuada erat nec ipsum consectetur aliquam. Pellentesque semper massa ac purus commodo et accumsan nisl pellentesque. Integer semper lobortis enim quis fringilla. Mauris lacinia risus quis ante scelerisque iaculis. Nullam at turpis a elit venenatis suscipit. Morbi consectetur, metus vel sodales semper, nulla tellus malesuada lectus, tincidunt viverra risus diam et elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed aliquam tincidunt velit, eget pretium urna blandit sit amet. Aliquam aliquam, tellus et dignissim dapibus, justo nisl sodales velit, eu condimentum tellus est ut risus. Nam id magna vel est cursus imperdiet at eu est. Mauris feugiat felis lacinia nibh hendrerit viverra.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida, purus vitae tempus tincidunt, orci nisl faucibus tortor, et sollicitudin ipsum elit ut risus. Maecenas massa arcu, volutpat in euismod nec, eleifend nec libero. Pellentesque elit odio, placerat eget congue vel, dapibus nec nisi. Cras id sem felis. Sed quis nisl sit amet sapien pulvinar congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean fermentum egestas libero, ullamcorper egestas tortor semper ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis arcu dolor, eu egestas nunc. Vestibulum luctus nulla semper sapien dictum interdum. Sed vel arcu elit. Aenean pellentesque odio vel nulla adipiscing eleifend in quis lacus. Ut commodo tincidunt quam, in imperdiet neque lacinia sit amet. Mauris dapibus condimentum diam nec hendrerit.</p>
     <p>Nullam metus nisl, elementum non ornare placerat, dapibus sed purus. Phasellus vel nulla lacus. Aenean malesuada erat nec ipsum consectetur aliquam. Pellentesque semper massa ac purus commodo et accumsan nisl pellentesque. Integer semper lobortis enim quis fringilla. Mauris lacinia risus quis ante scelerisque iaculis. Nullam at turpis a elit venenatis suscipit. Morbi consectetur, metus vel sodales semper, nulla tellus malesuada lectus, tincidunt viverra risus diam et elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed aliquam tincidunt velit, eget pretium urna blandit sit amet. Aliquam aliquam, tellus et dignissim dapibus, justo nisl sodales velit, eu condimentum tellus est ut risus. Nam id magna vel est cursus imperdiet at eu est. Mauris feugiat felis lacinia nibh hendrerit viverra.</p>
</div>

</body>
</html>

Open in new window

0
 
14_eastAuthor Commented:
Yep, I was doing that while you were typing up your reply I think!  Thanks... it all works great.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now