Making a background image a gradient - html

Question

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.

Answer 1

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

Answer 2

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;
}