CSS3 Image d'arrière-plan: centrée et de taille fixe

Question

J'ai un problème avec l'image d'arrière-plan.

J'ai une image de taille 2538 x 559px qui devrait être centrée indépendamment de la résolution ou de la taille de la fenêtre. L'image de fond doit avoir une taille fixe, elle ne doit pas être mise à l'échelle. Au milieu de l'image est un formulaire de texte sur une position spécifique, c'est pourquoi l'image ne doit pas évoluer.

Si nous avons une petite résolution ou si la fenêtre devient plus petite, le centre devrait être encore visible et l'image devrait être coupée à gauche et à droite.

J'ai essayé tellement de choses que j'ai parcourues et trouvées, rien n'a aidé. Pouvez-vous m'aider s'il vous plaît?

Merci beaucoup d'avance!

Answer 1

Avez-vous essayé:

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

Answer 2

Vous devez définir le background-position à un pourcentage:

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

Cela garantit que cela prendra un pourcentage de la largeur du récipient et afficher toujours dans le centre , couper la gauche et la droite de l'image.

Pour conserver l'image bg de la même taille toujours, vous devez utiliser la propriété background-size:. Sachez qu'il s'agit d'une propriété CSS3 et que IE < 9 ne le prendra pas en charge.

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