CSSを使用した背景画像の中央揃え

背景画像を中央に配置したい。divは使用されていません。これはCSSスタイルです。

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

上記のCSSは全体を並べて中央に配置しますが、画像の半分は見えず、上に移動するだけです。私がやりたいのは、画像を中央に配置することです。21インチの画面でも表示する画像を採用できますか？

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

うまくいくはずです。

そうでない場合は、div画像を使用z-indexして背景にしますか？これは、体の背景画像よりも中央に配置する方がはるかに簡単です。

それ以外は：

background-position: 0 100px;/*use a pixel value that will center it*/または、体min-heightを100％に設定すれば50％も使えると思います。

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%;
}

私はこのコードを使用します、それはうまくいきます

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;
}

私はこれが望まれていることだと思います：

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

試す

background-position: center center;

このような：

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;
}

コードにエラーがあります。background-imageプロパティに完全な構文と省略表記を組み合わせて使用​​しています。これはbackground-imageプロパティの有効な値ではないため、no-repeatが無視される原因になっています。

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

次のいずれかになります。

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

または

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

編集：画像の「スケーリング」の問題については、この質問の答えを確認することをお勧めします。

これを試して background-position: center top;

これはあなたのためのトリックを行います。

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

HTML 4.01 'STRICT' Doctypeを使用する場合、背景画像を垂直方向に中央揃えしません。

追加：

background-attachment: fixed;

問題を修正する必要があります

（アレクサンダーは正しいです）

単に交換する

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

と

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

上記の答えに満足できない場合は、これを使用してください

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

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

同じ問題があった。表示とマージンのプロパティを使用し、それが機能しました。

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

background-position: center center;

なしでは私にはうまくいきません...

background-attachment: fixed;

画像をx軸とy軸の両方に中央揃えで使用する

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

私のために働いた唯一のものは..

margin: 0 auto