CSS3 Background-image: centered and fixed size

background-image, css, position

Solution

You must set the `background-position` to a percentage:

body
{
    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.

http://jsfiddle.net/Kyle_Sevenoaks/QY5NQ/

Problem

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!

Original source