CODEWITHSUNDEEP
css
user3042036
user3042036

Reputation: 325

How to make background around header with opacity, while header is transparent?

I know how to make background with opacity, and to make header transparent. However, I have put image as the background, and I want to be with 50% opacity around the header, because I want my header to be transparent, and to have clear view part of background image. So far, i have input img background, and set up header with 50% opacity, but I need to be opposite. If i put background transparent, it will be even in the header, so it doesn't work for me.

Please does anyone know how to do it?

it should look like this https://www.dropbox.com/s/lb4xi6s9rjaa4lw/unnamed.png

Please ask me if you need additional explanation of the issue.

Upvotes: 0

Views: 161

Answers (1)

Hristo Georgiev
Hristo Georgiev

Reputation: 2519

There are some things CSS cannot do (or I cannot do with CSS) and this case is one of them. If you want this to work, you will need to use some scripting (and , unfortunately, math). Here is my code:

HTML

<div id="picture"></div>
<div id="overlay-left"></div>
<div id="overlay-right"></div>
<header>Lorem ipsum</header>

CSS

* {
    margin: 0;
    padding: 0;
}
header {
    border-top: 120px solid rgba(255, 255, 255, 0.5);
    position: absolute;
    left: 50%;
    margin-left: -480px;
    width:960px;
    height: 400px;
    z-index: 100;
    color: white;
}
#picture {
    top: 0;
    position: absolute;
    height: 400px;
    width: 100%;
    background: url("yourbackground.png");
}
#overlay-left {
    left:0;
    height: 400px;
    position: absolute;
    opacity: 0.5;
    background-color: white;
    z-index:100;
}
#overlay-right {
    right:0;
    height: 400px;
    position: absolute;
    opacity: 0.5;
    background-color: white;
    z-index:100;
}

JS

$(document).ready( function() {
 var widtha = ($(window).width() - 960)/2 ; //960 is the width of the box

 $('#overlay-left').css('width' , widtha + "px");
  $('#overlay-right').css('width' , widtha + "px");

});

The jQuery helps the CSS decide how much should it cover in order to make a nice box in the middle of a background image. This is responsive and it will always stay in the center as long as the viewport width is above 960. The math part is that the Jquery takes the viewport width, subtracts the width of the box and divides it into two parts - left and right. Then you just tell jquery to put the value in the CSS.

Try it out , hope it helps. I'll put a JS fiddle if you need one.

Upvotes: 1

Related Questions