Is it possible to use css to make a background image “fade” or gradient the bottom portion to transparent so that a background color shows?

Question

I know that this can easily be done in any image editing program, I was just curious if there was a way just using css.

Example:

body {background-col         


        

Answer 1

Ideally, you should just edit the image so as to have a consistent look across browsers.

While you can have a background gradient, that would appear behind an image, as the background images are placed over background color. In order to have the image look like it is fading into another color, you would need to place another tag on top of that the body such as:

body { background: url('https://i.stack.imgur.com/MUsp6.jpg') }
div.content { 
    width: 100%; 
    height: 100%; 
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

    
Example

Or whatever color/positioning combination you would like. A good resource is http://www.colorzilla.com/gradient-editor/