Ho can you create an image that will fade into the background so that it can be used at various widths (fade out + the same color background color). Thus it could be used at any screen resolution.

Woman against a blurred office background

  • 2
    Please clarify what is the usage? Is it for a website, where it would scale to the browser width? Images are static, they cannot modify themselves. – Alendri Aug 12 '12 at 21:40
  • yes, it is used for a website. image cannot scale, but the background can be. the background color just just like the side color of the image. – lovespring Aug 12 '12 at 22:19
  • 1
    Flagged for move to Graphic Design – user9817 Aug 13 '12 at 11:32
  • This was cross posted to graphic design. – rfusca Aug 13 '12 at 15:15

Here is the general technique. You can't make a single image re-size, but you can have several images. The main background image set to clip to the div it is in. Then you have an image on each side you want to fade out. Each of these are a gradient from background to transparent. I've attached an example to make it more clear. When the div is re-sized, the clipping images are moved to create the effect.

enter image description here

  • I would also add that the reverse of this method is possible. You can make the edges of the picture faded and have the background any color. This way if the browser window is very narrow (mobile devices) the face in the example picture will never be covered by the side-fade. Using the CSS3 gradient color with RGBA color code will let you use the method Phil described without even using PNG format for transparency. It does need browser support, but with HTML5 most support it. However I suggest looking in to the other stackexchange sites like webmaster or graphics for more on this. – Alendri Aug 13 '12 at 10:13

The photo that you present as an example has a shallow depth of field given by the large aperture used to capture it. It also can be given by a moderately large aperture used in combination with a long focal length lens.

This is a photography website, so above are the details on the photographic part of the image. You can also achieve a similar but not exact(opinion) effect by using software to blur the image in certain areas. Adobe Photoshop is commonly used for this.

The fact that you used the tag "fireworks" in the post leads me to believe that you are asking about web design, and if that is the case then this question for that scope would likely be off topic on this photography website, you can try the graphic design stack exchange here: https://graphicdesign.stackexchange.com/

  • thank you, I don't know that site. I will ask there. – lovespring Aug 12 '12 at 22:21

Not the answer you're looking for? Browse other questions tagged or ask your own question.