Bagaimana cara memusatkan gambar (latar belakang) di dalam div?

Apakah mungkin untuk memusatkan gambar latar belakang di div? Saya telah mencoba hampir semua hal - tetapi tidak berhasil:

<div id="doit">
  Lorem Ipsum ...
</div>

//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }

Apakah ini mungkin?

#doit {
    background: url(url) no-repeat center;
}

mencoba background-position:center;

EDIT: karena pertanyaan ini mendapatkan banyak tampilan, ada baiknya menambahkan beberapa info tambahan:

text-align: center tidak akan berfungsi karena gambar latar bukan bagian dari dokumen dan oleh karena itu bukan bagian dari alur.

background-position:centeradalah singkatan dari background-position: center center; ( background-position: horizontal vertical);

Gunakan background-position:

background-position: 50% 50%;

Untuk memusatkan atau memposisikan gambar latar belakang Anda harus menggunakan background-positionproperti. Properti background-position mengatur posisi awal gambar latar belakang dari topdan leftsisi elemen. Sintaks CSS adalahbackground-position : xvalue yvalue; .

Nilai yang didukung "xvalue" dan "yvalue" adalah unit panjang px nama persentase dan arah seperti kiri, kanan, dan lain-lain.

"Nilai x" adalah posisi horizontal latar belakang dan dimulai dari atas elemen. Ini berarti jika Anda menggunakannya 50pxakan menjadi "50px" dari atas elemen. Dan "yvalue" adalah posisi vertikal yang memiliki kondisi yang sama.

Jadi jika Anda menggunakan background-position: center;gambar background Anda akan berada di tengah.

Tapi saya selalu menggunakan kode ini:

.yourclass {
  background: url(image.png) no-repeat center /cover;
 }

Saya tahu ini sangat membingungkan tetapi artinya:

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

Dan saya tahu itu juga background-sizeadalah properti baru dan dalam kode terkompresi apa itu /covertetapi kode ini berarti fillukuran latar belakang dan pemosisian di latar belakang desktop windows.

Anda dapat melihat lebih detail tentang background-positiondi sini dan background-sizedi sini .

Jika gambar latar belakang Anda adalah sprite sheet yang disejajarkan secara vertikal, Anda dapat memusatkan setiap sprite secara horizontal seperti ini:

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: 50% [y position of sprite];
}

Jika gambar latar belakang Anda adalah sprite sheet yang disejajarkan secara horizontal, Anda dapat memusatkan setiap sprite secara vertikal seperti ini:

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: [x position of sprite] 50%;
}

Jika sprite sheet Anda padat, atau Anda tidak mencoba untuk memusatkan gambar latar belakang Anda di salah satu skenario yang disebutkan di atas, solusi ini tidak berlaku.

Ini bekerja untuk saya:

#doit{
    background-image: url('images/pic.png');
    background-repeat: no-repeat;
    background-position: center;  
}  

Ini bekerja untuk saya:

.network-connections-icon {
  background-image: url(url);
  background-size: 100%;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}

Ini bekerja untuk saya:

<style>
   .WidgetBody
        {   
            background: #F0F0F0;
            background-image:url('images/mini-loader.gif');
            background-position: 50% 50%;            
            background-repeat:no-repeat;            
        }
</style>        

Ini berfungsi untuk saya untuk menyelaraskan gambar ke tengah div.

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}