Autumn...

Autumn...

by Linus Kleen

submit your photo


Picture of the Week Themes
Suggest and vote on themes

Please participate in Meta
and help us grow.

Tell me more ×
Photography Stack Exchange is a question and answer site for professional, enthusiast and amateur photographers. It's 100% free, no registration required.
up vote 0 down vote favorite

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

share|improve this question
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 – Clara Onager Aug 13 '12 at 11:32
This was cross posted to graphic design. – rfusca♦ Aug 13 '12 at 15:15

closed as off topic by dpollitt, mattdm, rfusca♦ Aug 13 '12 at 15:15

Questions on Photography Stack Exchange are expected to relate to photography within the scope defined in the FAQ. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about closed questions here.

2 Answers

up vote 1 down vote accepted

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

share|improve this answer
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
up vote 2 down vote

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: http://graphicdesign.stackexchange.com/

share|improve this answer
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.