How to fade a background-image to transparency?

Question

Here's a related image:

I want to achieve something like what's pictured on the right side of my image. But I also have a parent container that has a background image of its own, instead of a solid color.

Any advice?

EDIT: Forgot to add, cross-browser compatibility is important. (Or atleast Firefox).

Solution 1

I can only think of one pure CSS solution and it is simply insane.

Let's say your image has a width of 100px. You'll have to create a div that's 100px wide and give it 100 children that are each 1px wide, that each have the same background (positioned accordingly) and that each have an opacity from 0 (the first child) to .99 (the last child).

Personally, I think it's crazy and I'd never use this method.

Rory O'Kane came with a nice and clean solution and I also have another idea which involves JavaScript.

Basically, the idea is that you use a canvas element (support), draw your image on it, loop through its pixels and adjust the alpha for each.

demo

(scroll down to see the result)

Relevant HTML:

<div class='parent'>
  <canvas id='c' width='575' height='431'></canvas>
</div>

Relevant CSS (setting the background image on the parent)

.parent {
  background: url(parent-background.jpg);
}

JavaScript:

window.onload = function() {
  var c = document.getElementById('c'), 
      ctxt = c.getContext('2d'), 
      img = new Image();
  
  img.onload = function() {
    ctxt.drawImage(img, 0, 0);
    var imageData = ctxt.getImageData(0, 0, 575, 431);
    for(var i = 0, n = imageData.data.length; i < n; i += 4) {
      imageData.data[i + 3] = 255*((i/4)%575)/575;
    }
    ctxt.putImageData(imageData, 0, 0);
  };
  /* images drawn onto the canvas must be hosted on the same web server 
  with the same domain as the code executing it */
  /* or they can be encoded like in the demo */
  img.src = 'image-drawn-on-canvas.jpg';
};

Solution 2

CSS only method:

https://gist.github.com/3750808

Solution 3

check these out maybe helpful

DEMO 1

DEMO 2

Solution 4

Ignoring possible CSS-only methods, you can make the image a PNG with the transparent gradient built in to the image’s alpha channel. All browsers support PNG transparency, except for IE 6 and below. Here’s what your sample image would look like as a PNG with a transparent gradient (try putting this image against other backgrounds):

If the images are user-submitted so you can’t add the gradient ahead of time, you could create and store a gradient-added version of each image at the time that the user uploads them.

View more solutions

Comments

[Admin]

I couldn't get the DEMO 1 to work on Firefox (Forgot to mention it on OP, but Firefox compatibility is important and preferably cross-browser too. I'll edit it in), and in DEMO 2, if you set body's background to some random image, it'll show you that the <img> tag isn't infact fading to transparency,but instead white.

[Afshin]

then you have to use demo 2 or other ways that i don't know

[Ana]

What possible CSS only methods? :) I can only think of one and that is completely INSANE = make a lot of child divs having the same background with different opacities from 0 to 1.

[Rory O'Kane]

@Ana I don’t have any CSS-only methods in mind. By “possible” methods I just mean that I can’t think of any off the top of my head, but I haven’t researched the subject enough to say that there definitely aren’t any.

[Rory O'Kane]

In case anyone’s wondering, here’s how I made the transparent gradient in the image: I opened the sample image in Adobe Photoshop CS5. I cropped the image down to the original image on the left. I clicked the “Add layer mask” button in the Layers panel. I used the Gradient Tool to draw a linear gradient from black at the left border to white at the right border (holding Shift to keep the angle horizontal). Finally, I exported a PNG-24 from File > Save for Web & Devices.

[Ana]

I'm a huge fan of CSS-only solutions, but in this case, I personally would go for your solution or a JavaScript one (using <canvas> & changing the alpha of pixels).

[Admin]

What do you mean by "create and store a gradient-added version of each image at the time that the user uploads them."? Sadly, they are going to be user-submitted, so using Photoshop for each one isn't an option :)

[Admin]

Welp, guess I have to figure out something else then. These are probably the only ways I could do this, but it's not what I'm looking for. Thanks anyways.

[Rory O'Kane]

@И- To create the modified image after the user uploads the original, you would have to write a server-side image-editing function to do that for you. The function would use an image-editing library such as ImageMagick (with the appropriate wrapper for your language, e.g. RMagick if your app is in Ruby). When the server recieves the uploaded image, it would pass the image data to your custom gradient-adding function, then store the modified image in a separate binary field in the database or a separate file on your filesystem.

[Rory O'Kane]

ImageMagick can draw gradients and use custom images as masks. To add the transparency gradient, you would first draw a gradient from black on the left to white on the right in a new image with the same dimensions as the original. Then you would apply that gradient image as the mask.