Memusatkan gambar latar belakang, menggunakan CSS

Saya ingin memusatkan gambar latar belakang. Tidak ada div yang digunakan, ini adalah gaya CSS :

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

CSS di atas ubin seluruh dan tidak memusatkannya, tetapi setengah gambar tidak terlihat, itu hanya semacam bergerak ke atas. Yang ingin saya lakukan adalah memusatkan gambar. Bisakah saya mengadopsi gambar untuk dilihat bahkan pada layar 21 "?

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

Itu seharusnya bekerja.

Jika tidak, mengapa tidak membuat divdengan gambar dan gunakan z-indexuntuk menjadikannya latar belakang? Ini akan jauh lebih mudah untuk dipusatkan daripada gambar latar belakang pada tubuh.

Selain itu coba:

background-position: 0 100px;/*use a pixel value that will center it*/Atau saya pikir Anda dapat menggunakan 50% jika Anda telah mengatur tubuh Anda min-heightmenjadi 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%;
}

Saya menggunakan kode ini, ini berfungsi dengan baik

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

Saya pikir inilah yang diinginkan:

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

Mencoba

background-position: center center;

Seperti ini:

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

Ada kesalahan dalam kode Anda. Anda menggunakan campuran sintaksis lengkap dan notasi steno pada properti gambar latar. Hal ini menyebabkan no-repeat diabaikan, karena itu bukan nilai yang valid untuk properti gambar latar.

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

Harus menjadi salah satu dari yang berikut:

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

atau

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

EDIT: Untuk masalah 'penskalaan' gambar Anda, Anda mungkin ingin melihat jawaban pertanyaan ini .

Coba ini background-position: center top;

Ini akan melakukan trik untuk Anda.

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

Tidak memusatkan gambar latar belakang secara vertikal saat menggunakan html 4.01 'STRICT' doctype.

Menambahkan:

background-attachment: fixed;

Haruskah memperbaiki masalahnya

(Jadi Alexander benar)

cukup ganti

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

dengan

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

jika Anda tidak puas dengan jawaban di atas maka gunakan ini

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

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

Punya masalah yang sama. Properti tampilan dan margin yang digunakan dan itu berhasil.

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

background-position: center center;

tidak bekerja untuk saya tanpa ...

background-attachment: fixed;

menggunakan kedua gambar saya di tengah sumbu x dan y

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

Satu-satunya hal yang bekerja untuk saya adalah ..

margin: 0 auto