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

140

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?

oompahloompah
sumber

Jawaban:

281
#doit {
    background: url(url) no-repeat center;
}
Lucas
sumber
25
Terima kasih. CSS khusus untuk pemusatan adalah "background-position: center;"
pmont
@Green: Lihat jawaban saya untuk gambar latar sprite.
Parallax
3
Jika Anda ingin seluruh div diisi dengan gambar dan tidak ada ruang tambahan yang harus Anda gunakan background-size: cover; Jika Anda ingin seluruh gambar ditampilkan tanpa ada bagian gambar yang terpotong atau direntangkan, Anda ingin menggunakanbackground-size: contain;
Zlerp
81

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

TimCodes.NET
sumber
sebenarnya Anda hanya perlubackground-position:center;
Dave Sag
Jawaban yang dipilih menyebabkan seluruh latar belakang saya menghilang karena suatu alasan (agar adil saya melakukan beberapa hal jquery yang mungkin menyebabkannya?), Tetapi jawaban ini berhasil. Suara positif.
bwoogie
15

Gunakan background-position:

background-position: 50% 50%;
Kapsul
sumber
1
berguna jika Anda membutuhkan gambar secara horizontal di tengah tetapi di atas secara vertikal: background-position: 50% 0%;
Sébastien Gicquel
50% 0 lebih pendek dari ;-) Di CSS, Anda tidak memerlukan unit apa pun saat nilainya 0
Capsule
9

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 .

Morteza Sadri
sumber
7

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.

Parallax
sumber
5

Ini bekerja untuk saya:

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

Ini bekerja untuk saya:

.network-connections-icon {
  background-image: url(url);
  background-size: 100%;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}
Collin Adams
sumber
1
margin: 0 auto;di mana automembuatnya berada di tengah secara horizontal di dalam div. Terima kasih!
oyalhi
1

Ini bekerja untuk saya:

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

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;
}
sangfroid-eng
sumber