Take the 2-minute tour ×

I've got a problem with the background-image.

I've got an image at size 2538 x 559px that should be centered regardless of window resolution or size. The background-image should have a fixed size, it mustn't scale. In the middle of the image is a text form on a specific position, that's why the image mustn't scale.

If we have a small resolution or if the window gets smaller, the center still should be visible and the image should be cut left and right.

I tried so many things I browsed and found, nothing helped. Can you please help me?

Thanks so much in advance!

share|improve this question
Please also post the approaches you tried (as well as what went wrong), so we do not have to retread old ground. –  Asad Nov 15 '12 at 12:24
all right, thanks for your tip. –  christophe Nov 15 '12 at 16:44
add comment

2 Answers

Have you tried:

background-position: center;
background-size: 2538px 559px;
share|improve this answer
That is not the solution, the image doesn't stay centered. –  christophe Nov 15 '12 at 16:42
add comment

You must set the background-position to a percentage:

    height: 100%;
    width: 100%;
    background: url('path/to/file.png') no-repeat;
    background-position: 50% 50%;
    background-size: 1920px 1200px;

This ensures that it will take a percentage of the container's width and always display it in the center, cutting the left and right of the image.

To keep the bg image the same sizew always, you should use the background-size: property.

Be aware that this is a CSS3 property and IE<9 will not support it.


share|improve this answer
Thank you Kyle, but I did it like you before! Now I recognized my problem: The default browser window size was set to a minimum ... I was so desperated. lol Nonetheless: Thank you very much! –  christophe Nov 15 '12 at 16:38
add comment

Your Answer


