CODEWITHSUNDEEP
css
Chris569x
Chris569x

Reputation: 445

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?

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-color: #837960; background-image: url("Images/background.jpg") background-repeat: no-repeat;}

Could you use css to fade the background image into the background color so a visible line does not exist or should I keep adding a gradient to transparency in Photoshop?

Upvotes: 24

Views: 80017

Answers (4)

Design.Garden
Design.Garden

Reputation: 4237

Answer: Use the mask-image CSS property for complete control of an element's transparency, as in:

-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 70%);

html {
  /* Needed for the SO Code Snippet */
  height: 100%;
}

body {
  background-color: #837960;
}

body::after {
  /* The answer */
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 70%);
  
  /* Extra CSS */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyAgZmlsbD0icmdiYSgwLDAsMCwwLjIpIiBoZWlnaHQ9IjE2MHB4IiB3aWR0aD0iODBweCIgdmlld0JveD0iMCAwIDgwIDE2MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNDEuMTIsNDAsNTMsMTYuMjgsNjAuNjIsMUg4MFYwSDU4Ljg4TDQwLDM3Ljc2LDIxLjEyLDBIMFYxSDE5LjM4TDI3LDE2LjI4LDM4Ljg4LDQwLDE5LjM4LDc5SDB2MkgxOS4zOGwxOS41LDM5LTE5LjUsMzlIMHYxSDIxLjEyTDQwLDEyMi4yNCw1OC44OCwxNjBIODB2LTFINjAuNjJsLTE5LjUtMzksMTkuNS0zOUg4MFY3OUg2MC42MlpNNDAsMTE3Ljc2LDIxLjEyLDgwLDQwLDQyLjI0LDU4Ljg4LDgwWiIvPjwvc3ZnPg==);
}

A couple notes:

  • mask-image isn't 100% supported across browsers, so, as seen in the example, you'll use the -webkit-mask-image version for Chrome.
  • mask-image applies to the content of the element, which can be confusing to work with when applied to the <html> and <body> tags (hence I've had to apply extra CSS in the example).

Upvotes: 0

vhs
vhs

Reputation: 10079

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.

Upvotes: 12

Elizabeth Fuller
Elizabeth Fuller

Reputation: 157

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.sstatic.net/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/

Upvotes: 2

Lemur
Lemur

Reputation: 2665

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

body {
    background: #837960 url("https://i.sstatic.net/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/)

Upvotes: 13

Related Questions