combine background image with gradient doesn't work in my case? - html

demo http://jsfiddle.net/hfkhb9eL/
I used this for gradient
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65)100%); and it work, but after I tried to merge it with a background image it doesn't work, anything wrong with this :
background-image: url(http://i.imgur.com/Hsban3N.jpg), -webkit-linear-gradient(top,rgba(0,0,0,0)0%,rgba(0,0,0,0.65)100%);
?


I think you had the image/gradient in the wrong order.
div {
width: 100px;
height: 100px;
background-image:
-webkit-linear-gradient(top, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65) 100%),
url('http://i.imgur.com/Hsban3N.jpg');
}
<div>hi</div>
Basically, the stacking order is first declared is on top and the next is underneath that...and so on.


You can add the gradient in :after
div:after{
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65)100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65)));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65)100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65)100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65)100%);
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
content:'';
display:block;
}
http://jsfiddle.net/hfkhb9eL/1/

Related

How to combine Background Image + Linear Gradient in CSS ? Linear Gradient over the Background Image

wish you all are doing well.
So I have a section with a background image and I want to add a linear gradient over the background image.
The result I aim for:
Till now, I have a div with a background image.
Curent CSS:
background-image: url("../pixels/lastCallToActionBg.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
Linear Gradiant CSS that I want to add:
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(
top,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 1%,
rgba(0, 0, 0, 0) 15%,
rgba(0, 0, 0, 0) 100%
); /* FF3.6-15 */
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgba(0, 0, 0, 1)),
color-stop(1%, rgba(0, 0, 0, 1)),
color-stop(15%, rgba(0, 0, 0, 0)),
color-stop(100%, rgba(0, 0, 0, 0))
); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(
top,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 1%,
rgba(0, 0, 0, 0) 15%,
rgba(0, 0, 0, 0) 100%
); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(
top,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 1%,
rgba(0, 0, 0, 0) 15%,
rgba(0, 0, 0, 0) 100%
); /* Opera 11.10-11.50 */ /* IE10 preview */
background: -webkit-gradient(
linear,
left top,
left bottom,
from(rgba(0, 0, 0, 1)),
color-stop(1%, rgba(0, 0, 0, 1)),
color-stop(15%, rgba(0, 0, 0, 0)),
to(rgba(0, 0, 0, 0))
);
background: -moz-linear-gradient(
top,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 1%,
rgba(0, 0, 0, 0) 15%,
rgba(0, 0, 0, 0) 100%
);
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 1%,
rgba(0, 0, 0, 0) 15%,
rgba(0, 0, 0, 0) 100%
); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-8 */
Thank you.

Make a div inside the section, it will serve as a mask, and set the gradient of this mask as a background in it.
The css of the mask will look like this:
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
So it would be all over the parent element (section)
section {
width: 100vw;
height: 10rem;
background: url(https://www.yannickdixon.com/wp-content/uploads/2016/12/161124-golden-seaside-sunset-photography-print.jpg);
}
.overlay {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(1%, rgba(0, 0, 0, 1)), color-stop(15%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)) );
background: -webkit-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
background: -o-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
background: -webkit-gradient( linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(1%, rgba(0, 0, 0, 1)), color-stop(15%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)) );
background: -moz-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
background: linear-gradient( to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 );
}
<section>
<div class="overlay"></div>
</section>

try this one
body {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(https://actionseaze.com/wp-content/uploads/2020/02/sunset.jpg),
-webkit-linear-gradient(
top,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 1%,
rgba(0, 0, 0, 0) 35%,
rgba(0, 0, 0, 0) 100%
);
background-blend-mode: color;
height: 100vh;
}

CSS - styling input type range

I have a range input like so:
.volume{
-webkit-appearance:none;
width:100px;
background:transparent;
}
.volume:focus{
outline:none;
}
.volume::-webkit-slider-runnable-track{
height:5px;
cursor:pointer;
background:Black;
border:0.5px solid DimGrey;
border-radius:5px;
}
.volume::-webkit-slider-thumb{
-webkit-appearance:none;
border:1px solid #444;
width:30px;
height:16px;
text-align:center;
margin-top:-5.5px;
background:url("https://prototype.demixr.com/media/slider.png") center no-repeat;
}
<input class="d-inline-block volume" type="range" name="volume0" id="volume0" data-id="0" min="0" max="1" value="0.5" step="0.01">
<br />
<img src="https://prototype.demixr.com/media/ruler.png" alt="slider steps" class="levels_steps">
Is it possible to get the thumb image to overflow the track so that the center of the image lines up with the ruler underneath when it is at the extreme of either side?

Basically what you do is shrink the volume scale below the thumb to fit the start and end position. Then add a margin on the left to push the scale image to the starting position.
Then exchange the background of the range slider itself to use a gradient with opacity on the edges (left and right) to make sure the slider knob moves to the end positions of the slider and does not still show some black pixels.
The code should now work in Chrome and Firefox.
Code:
.volume {
-webkit-appearance: none;
width: 120px;
background: transparent;
}
.volume:focus {
outline: none;
}
.volume::-webkit-slider-runnable-track {
height: 5px;
cursor: pointer;
background: rgba(0, 0, 0, 0);
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(12%, rgba(0, 0, 0, 0)), color-stop(12%, rgba(0, 0, 0, 1)), color-stop(88%, rgba(0, 0, 0, 1)), color-stop(88%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
background: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
background: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=1);
}
.volume::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #444;
width: 30px;
height: 16px;
text-align: center;
margin-top: -5.5px;
background: url("https://prototype.demixr.com/media/slider.png") center no-repeat;
}
input[type=range]::-moz-range-track {
height: 5px;
cursor: pointer;
background: rgba(0, 0, 0, 0);
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(12%, rgba(0, 0, 0, 0)), color-stop(12%, rgba(0, 0, 0, 1)), color-stop(88%, rgba(0, 0, 0, 1)), color-stop(88%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
background: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
background: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=1);
}
input[type=range]::-moz-range-thumb
{
-webkit-appearance: none;
border: 1px solid #444;
width: 30px;
height: 16px;
text-align: center;
margin-top: -5.5px;
background: url("https://prototype.demixr.com/media/slider.png") center no-repeat;
}
.levels_steps {
width: 90px;
margin-left: 17px;
}
<input class="d-inline-block volume" type="range" name="volume0" id="volume0" data-id="0" min="0" max="1" value="0.5" step="0.01">
<br />
<img src="https://prototype.demixr.com/media/ruler.png" alt="slider steps" class="levels_steps">
In normal cases I would have assigned the CSS rules to both Firefox and Chrome in one rule (.volume::-webkit-slider-runnable-track, .input[type=range]::-moz-range-track { ... } but this either made the changes disappear in Chrome or Firefox so I duplicated it. Might be due to the browser-specific prefixes -moz and -webkit.

CSS two layer gradient effect

I have CSS command
.overlay-menu {
top: 0px;
left: 0px;
width: 300px;
height: 300px;
background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);}
but i have problem. How i can add layer for next layer?
My idea from this command add next layer where is:
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 49%, rgba(0, 0, 0, 0) 100%);
I wanted circle with linear tranparency.

You can use two gradients together.
.overlay-menu {
top: 0px;
left: 0px;
width: 300px;
height: 300px;
background: linear-gradient(to bottom, #f69d3c, #f69d3c, transparent, #f69d3c, #f69d3c),
radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
}
<div class="overlay-menu"></div>

Yes it is solution, but i want replace orange color as transparency.
My solution i am adding:
.overlay-menu {
top: 0px;
left: 0px;
width: 300px;
height: 300px;
background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
-webkit-mask-image:
-webkit-gradient(linear, center bottom, center top,
color-stop(0, rgba(0, 0, 0, 0)),
color-stop(0.15, rgba(0, 0, 0, 0.6)),
color-stop(0.5, rgba(0, 0, 0, 0.8)),
color-stop(0.75, rgba(0, 0, 0, 0.6)),
color-stop(0.85, rgba(0, 0, 0, 0.5)),
color-stop(0.95, rgba(0, 0, 0, 0)));
}
<div class="overlay-menu"></div>

Align text to bottom in a button and in front of background

How can I align the text in the button to the bottom?
I tried to set line-height and vertical-align: bottom; in my CSS but neither worked.
UPDATE:
Also, I want the text to be in front of the background. I have set back gradients in the normal, hover and active states, so I my white text to be in front of that.
Code:
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
color: white;
}
.img-panel:after {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
}
.img-panel:hover:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(40%, rgba(0, 0, 0, 0.3)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
}
.img-panel:active:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(40%, rgba(0, 0, 0, 0.6)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
<div class="col-md-4 img-panel-container">
<button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
Hello
</button>
</div>
</div>
For some reason bootstrap is not working in the code snippet

You can create a child element in your button (here a span) that you position to the bottom of the button.
Because the button is position: relative, the span with position: absolute will be position according to the button.
We also create a child element to display the background, via the ::before pseudo-element selector.
To resolve which child will be display on top, between two position: absolute elements, the browser use the HTML/DOM order. So a ::before element will be displayed below the others, while a ::after will be displayed on top.
You also can force the stacking order with the z-index property.
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
}
.img-panel::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to bottom, transparent 40%, black 100%);
}
.img-panel:hover::before {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 40%, black 100%);
}
.img-panel > span {
position: absolute;
left: 0; right: 0; bottom: 0;
text-align: center;
color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
<span>Hello</span>
</button>

You could use vertical-align: bottom; but to do this you need to apply a display:table to the container and display:table-cell to the button and give him some specific height.
Take a look to this examples: http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html

Try adding this:
<style>
span{
position: absolute;
bottom: 0;
}
</style>
And in html markup add:
<span>Hello</span>

Try this
.img-panel {
display: flex;
flex-direction: column-reverse;
align-items: center;
}

If your button's height is 300px, you can try with a padding-top property :
CSS:
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
color: white;
padding-top:250px;
}
Bootply : http://www.bootply.com/AHSl2MVDIy

Place your button text in a span, give it absolute positioning and set bottom to 0:
See the .img-panel span.button-title rule.
Update:
To place the text above the background, just add a higher z-index for the button text. A low number will do it.
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
color: white;
}
.img-panel:after {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
}
.img-panel:hover:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(40%, rgba(0, 0, 0, 0.3)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
}
.img-panel:active:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(40%, rgba(0, 0, 0, 0.6)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
}
.img-panel span.button-title {
position: absolute;
bottom: 0;
z-index: 10;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
<div class="col-md-4 img-panel-container">
<button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
<span class="button-title">Hello</span>
</button>
</div>
</div>

Making a background image a gradient

I'm trying to add a gradient to my CSS background image. I've found a bunch of other post relating to having a gradient background, with an image sitting on top, but I would like the image itself to be a gradient. I tried this:
body {
margin: 0;
width: 100%;
height: 100%;
font-family: rexlia;
background-size: cover;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url(cubes.jpg) no-repeat;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat;
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat;
}
All this does however is display the unmodified image. This snippit actually came from another post, in which apparently it worked. Doesn't for me though. Can anybody shed some light on this? Thanks.

I'm guess that is this is the only code you are using then you've omitted to make the html element 100% tall so that the body can also be 100% tall.
html {
height: 100%;
}
body {
margin: 0;
width: 100%;
min-height: 100%;
background-size: cover;
background-image: linear-gradient(to bottom, rgba(255, 0, 0, .5) 0%, rgba(255, 0, 0, .5) 59%, rgba(0, 0, 255, 0.65) 100%), url(http://lorempixel.com/image_output/technics-q-c-640-480-2.jpg);
}
JSfiddle Demo

if you remove margin:0; it works and gradient strippes image(because of that defaut margin body starts to fill html), or add html{height:100%;} it works.
html or body background mixe together if not set in both tags
some test so you can see and understand behavior
body {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.75) 100%), url(http://lorempixel.com/300/200/abstract/10) center no-repeat;
background-size: cover, cover;
}
html:hover body {
margin: 4em;
/* gradient is repeated and takes margin value as reference to repeat itself in html background */
}
if body has content or a valid height fixed, it works the same way
body {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.75) 100%), url(http://lorempixel.com/300/200/abstract/10) center no-repeat;
background-size: cover, cover;
}
html:hover body {
margin: 4em;
/* gradient is repeated body's height and keeps being repetead in html background*/
height: 100px;
if you add html, body {height:100%;} then body has a valid height.
html, body {height:100%;}
body {
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0, 0) 59%, rgba(0, 0, 0, 0.75) 100%), url(http://lorempixel.com/300/200/abstract/10) center no-repeat;
background-size: cover, cover;
}
and finally, if you give a background value to html, body will hold its own background within itself.
html{background:lime;}
body {
padding:2em;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0, 0) 59%, rgba(0, 0, 0, 0.75) 100%), url(http://lorempixel.com/300/200/abstract/10) center no-repeat;
background-size: cover, cover;
}