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?

It is possible - in CSS3 you can set multiple values for background

body {
    background: #837960 url("https://i.stack.imgur.com/MUsp6.jpg") 0 0 no-repeat;

    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(130,91,0,1) 100%);   /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(130,91,0,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#825b00',GradientType=0 ); /* IE6-9 */
}

However, it will work only in modern browser that supports CSS3

(code generated via http://www.colorzilla.com/gradient-editor/)


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 */
}
<body>
    <div class="content">Example</div>
</body>

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


Yes it's possible with CSS using the linear-gradient() function with multiple background images:

body {
  background-color: #837960;
  background-image: linear-gradient(
    to bottom, transparent, #837960
  ), url("Images/background.jpg");
  background-repeat: no-repeat;
}

Specify the gradient as the first image so it gets stacked on top, and use it to fade from transparent at the top to the opaque background-color at the bottom. This will give the illusion the image underneath is fading into the background without requiring alpha-transparency on the image itself.

Tags:

Css

Recent Posts