Menu
I am trying to make my footer transparent, I have managed to do it successfully though why does my content in the footer also change to the same transparency?
CSS -
**.footer {
background: #000000;
opacity:0.6;
filter:Alpha(opacity=60); /* IE8 and earlier */
margin-top: 2em;
float: left;
width: 800px;
height: 175px;
clear:both
margin-left: auto;
margin-right: auto;
line-height: 1.0em;}**
Then my content is in separate classes on top. How do I make that content sit on top and only the footer background / footer wrapper is tinted?
Your best bet would be to use a transparent background, e.g.
.footer {
opacity: 1; // Leave this as 1
background-color: rgba(0,0,0,0.6); // This is in the form rgba(R,G,B,a) where a is your opacity
// The rest of your CSS
}
Also, to maintain IE support, you would have to put something like this in your <head> tag
<!--[if IE]>
<style type="text/css">
.footer {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C000000,endColorstr=#3C000000);
zoom: 1;
}
</style>
<![endif]-->
Where #3C000000 is in the form aRGB, with opacity in hexadecimal (i.e. 3C is 60%). See csstricks for more details.
Fred.
100
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
