How to create this image effect for my home page

[BobGW]

How do I make a wide, somewhat fast loading image effect like this home page has:

3dcart.com

work on my website

bobweikel.com

I'm asking for how to create the effect (with small enough image kb to load) and what the image should be of in your opinion.

Thanks!

[TranslateMediaLtd]

Hi Bob,

This effect is done using a background image.

The image being used is this one:

http://www.3dcart.com/images/5/main-panorama3.jpg

It has a width of 2500 and height of 444. This ensures that it takes up the whole screen on devices less than 2500px wide (which is most of them). The image has feathering on the left and right - which allows it to fade to the same as the black background on devices largest than 2500px.

The site specifies the image, width and background colour in their CSS file:

.panel0 {
     height: 444px;
     background: #18100d url(../images/5/main-panorama3.jpg) no-repeat center top;
}

and to display the background image - they use HTML similar to this:

[SOME STUFF]

I hope that helps.