CODEWITHSUNDEEP
csspositionbackground-image
christophe
christophe

Reputation: 692

CSS3 Background-image: centered and fixed size

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!

Upvotes: 3

Views: 20990

Answers (2)

Kyle
Kyle

Reputation: 67244

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/

Upvotes: 7

user1726343
user1726343

Reputation:

Have you tried:

background-position: center;
background-size: 2538px 559px;

Upvotes: 2

Related Questions