Having trouble spanning a background image to show in full

Question

I have an image that I would like to show in full regardless of screen size. I pulled up the image in Photoshop to render its size (it was originally 4164 x 2667 since it was a vector) and make some changes to it.

I downsized the image to about 1200 x 769 and saved it as a PNG. However, the entire image is not displaying properly on my monitor - it seems to be stretching it beyond the screen and cutting off a good portion of the background.

Here is the original image:

and here is a link to the code I used on jsbin to work with trying it out:

http://jsbin.com/uyirah/2/edit

You can see that if you render the code the image doesn't fully display. Any ideas on what might causing this? Is my CSS bad?

Also, what would be a good size to use for the final image as to reduce lag time?

Answer 1

You are specifying "cover" for background-size in your css. This indicates that you want the image to scale so that it completely covers the background, even if this cuts off some of the image in one dimension.

If you want the image to show completely as large as possible in the background, try "contain" instead of "cover"...