I've spent over an hour searching for the right answer with no luck, so I'm turning to you for help. On my main page, there's a div with a large image that looks like this:
<div id="hero"></div>
It's working perfectly at the moment, but I want to add a gradient on the left and right sides of the image to fade it out into almost black. However, I can't seem to make it work.
The CSS code for the hero div is as follows:
#hero{
background-image: url("hero.jpg");
background-position: center center;
background-repeat: repeat-x;
background-color:#FFFFFF;
width:100%;
height:200px;
position:relative;
}
What I'm trying to add is this:
background: linear-gradient(to right, rgba(38, 35, 31, 0.8) 0%, rgba(65, 60, 53, 0) 50%, rgba(38, 35, 31, 0.8) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
content: "";
left: 0;
opacity: 1;
right: 0;
top: 0;
transition: opacity 0.5s ease 0s;
However, adding it to the div doesn't seem to be working. I even tried combining the background-image and the gradient like this:
background-image: url("hero.jpg"), linear-gradient(to right, rgba(38, 35, 31, 0.8) 0%, rgba(65, 60, 53, 0) 50%, rgba(38, 35, 31, 0.8) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
but that just results in a white space.
Any suggestions on what I might be doing wrong?
Thank you for any guidance :)
EDIT: Please note that there is content (buttons and text) inside the "hero" div, so the gradient should not overlap the content, only the background image.