Centrer une image d'arrière-plan, en utilisant CSS

Je souhaite centrer une image d'arrière-plan. Il n'y a pas de div utilisé, c'est le style CSS :

body{
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

Les tuiles CSS ci-dessus partout et le centrent, mais la moitié de l'image n'est pas vue, elle se déplace simplement vers le haut. Ce que je veux faire, c'est centrer l'image. Puis-je adopter l'image pour l'afficher même sur un écran de 21 pouces?

background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;

Cela devrait fonctionner.

Sinon, pourquoi ne pas en faire un divavec l'image et l'utiliser z-indexpour en faire l'arrière-plan? Ce serait beaucoup plus facile à centrer qu'une image d'arrière-plan sur le corps.

Autre que cela, essayez:

background-position: 0 100px;/*use a pixel value that will center it*/Ou je pense que vous pouvez utiliser 50% si vous avez réglé votre corps min-heightà 100%.

body{

    background-repeat:no-repeat;
    background-position: center center;
    background-image:url(../images/images2.jpg);
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    min-height:100%;
}

J'utilise ce code, ça marche bien

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background: black url(back2.png) center center no-repeat;;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Je pense que c'est ce que l'on veut:

body
{
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
} 

Essayer

background-position: center center;

Comme ça:

background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;

html{
height:100%
}

body{
background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;
}

Il y a une erreur dans votre code. Vous utilisez un mélange de syntaxe complète et de notation abrégée sur la propriété background-image, ce qui fait ignorer la non-répétition, car ce n'est pas une valeur valide pour la propriété background-image.

body{   
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

Devrait devenir l'un des suivants:

body{
    background:url(../images/images2.jpg) center center no-repeat;
}

ou

body
{
    background-image: url(path-to-file/img.jpg);
    background-repeat:no-repeat;
    background-position: center center;
}

EDIT: Pour votre problème de «mise à l'échelle» de l'image, vous voudrez peut-être regarder la réponse à cette question .

Essaye ça background-position: center top;

Cela fera l'affaire pour vous.

background-repeat:no-repeat;
background-position:center center;

Ne centre pas verticalement l'image d'arrière-plan lors de l'utilisation d'un doctype html 4.01 'STRICT'.

Ajouter:

background-attachment: fixed;

Devrait résoudre le problème

(Alors Alexandre a raison)

remplacez simplement

background-image:url(../images/images2.jpg) no-repeat;

avec

background:url(../images/images2.jpg)  center;

si vous n'êtes pas satisfait des réponses ci-dessus, utilisez ceci

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

    body
    {
        background-image: url("background.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 80%;
    }

Avait le même problème. Utilisé les propriétés d'affichage et de marge et cela a fonctionné.

.background-image {
  background: url('yourimage.jpg') no-repeat;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: whateveryouwantpx;
  width: whateveryouwantpx;
}

background-position: center center;

ne fonctionne pas pour moi sans ...

background-attachment: fixed;

en utilisant à la fois mon image centrée sur les axes x et y

background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;

La seule chose qui a fonctionné pour moi est ...

margin: 0 auto