How to darken the lower part of the background image? - html

Question

I would like to darken only lower part of the image and ofcourse with linear gradient, so that it goes from light on the top to dark at the bottom of the div.
If there is the other option to do that with div, where the text is there?
Do you need to do that in css or style inside html?
My html code where that background image is:
<div id="content-wide">
<div class="post">
<div class="imgwide" style="background-image: url(image.jpg); background-repeat: no-repeat; background-size: 100%; background-position: center;">
<div class="p-heading"><h1><?php the_title(); ?></h1>
<div class="p-content">
here is the text
</div>
</div>
</div>
</div>
</div>
my style.css contains these entries:
#content-wide {
position: relative;
width: 1180px;
float: left;
background: #F4F4F4;
margin-bottom: 19px;
}
.imgwide {
width: 1160px;
height: 450px;
margin: 10px 10px 10px 10px;
}
#content-wide .post, #content .page {
background-color: #F4F4F4;
}
#content-wide .p-heading {
position: absolute;
bottom: 0;
left:0;
width: 844px;
height: 180px;
}
#content-wide .p-heading h1 {
color: #F8F8F8;
font-size: 26px;
padding: 20px 20px 20px 30px;
}
#content-wide .p-heading h1 a {
color: #F8F8F8;
text-decoration: none;
text-transform: none;
}
#content-wide .p-heading h1 a:hover {
text-decoration: none;
color: #F8F8F8;
}
#content-wide .p-content {
padding: 0px 20px 20px 30px;
font-family: Frutiger, Lato;
font-size: 15px;
line-height: 16px;
text-align: none;
color: #EAEAEA;
}

Answer 1

You can use a CSS solution, check Transparency Gradient, it works like this :
background:linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), url('your_url');
This will darken the bottom of your background-image.
If you do not want to darken the image but the div on top of it then use :
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 70%);
on your div (.p-heading).