Is it possible to use a gradient over a css background image? - css

Question

I am trying to get a div to have a blue background image which is 500px wide. I then am trying to get the gradient to be white at the very left of the div and as it goes right the background image is slowly visible

Answer 1

This css code will be useful to make it gradient
.gradient {
width: 200px;
height: 200px;
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
}
Use the above css in html using class
<div class="gradient">
gradient box
</div>

Answer 2

I actually just posted something similar on another question, but it applies in this case as well. Here it is in action:
http://sassmeister.com/gist/3528cb23d3e831231949
And the CSS to achieve this effect:
.hero {
width: 100%;
height: 500px;
background: url("http://placesheen.com/1200/500") center center no-repeat;
background-size: cover;
}
.hero:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 508px;
background-image: linear-gradient(rgba(255, 255, 255, 0.2), white);
}
Of course be sure to add the correct vendor-prefixes so that it is cross-browser compatible. And if you wanted to change gradient directions you would change the gradient values.
The html:
<div class="hero">
You could put content here if you want
</div>
More on gradients:
http://www.w3schools.com/css/css3_gradients.asp