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