Menu
I am trying to make my background image transparent, and the rest of the page not transparent, eg a faded background image on top of non faded HTML and CSS.
I have an HTML page with an image as the background using a div. Below is a simplified version of the page:
<HTML>
<head>
<style type="text/css">
#backgroundImage {
background-image: url('../Documents/images/Sea.jpg');
background-repeat: no-repeat;
background-size: 100%;
opacity: 0.4;
filter:alpha(opacity=40);
height:100%;
width:100%;
z-index:0.1;
}
.main{
height:500px;
width:900px;
margin:auto;
background-color:green;
z-index:1;
opacity: 1;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<div id="backgroundImage">
<div class="main">
</div>
</div>
</body>
I found this setup in the following question:
How can I make my website's background transparent without making the content (images & text) transparent too?
and it almost works, except that the whole page is transparent, not just the background image.
I have tried adjusting the Z-index and opacity on the 'main' div, but it is not working.
I feel this is a simple fix but I just cant see the solution.
I also tried this question, but it did not seem to offer a solution:
How do i make my background image transparent in CSS if I have the following code?
and this one:
CSS background-image-opacity?
I do not have sufficient reputation to post an image of what I am trying to achieve.
516
HTML:
<div id="backgroundImage">
<div class="main">
</div>
</div>
CSS:
#backgroundImage{z-index: 1;}
#backgroundImage:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: url(http://static.tumblr.com/25bac3efec28a6f14a446f7c5f46b685/hywphoq/ufoniwv6n/tumblr_static_ldhkrazuoqo4g0s0sk8s4s4s.jpg);
background-repeat: no-repeat;
background-size: 100%;
opacity: 0.4;
filter:alpha(opacity=40);
height:100%;
width:100%;
}
.main{
height:320px;
width:320px;
margin:auto;
background-color:green;
z-index:-1;
opacity: 1;
filter:alpha(opacity=100);
}
JSFIDDLE DEMO
Site reference: http://nicolasgallagher.com/css-background-image-hacks/demo/opacity.html
155
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
