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?
background-size: cover;
Jika Anda ingin seluruh gambar ditampilkan tanpa ada bagian gambar yang terpotong atau direntangkan, Anda ingin menggunakanbackground-size: contain;
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:center
adalah singkatan daribackground-position: center center
; (background-position: horizontal vertical
);sumber
background-position:center;
Gunakan background-position:
background-position: 50% 50%;
sumber
Untuk memusatkan atau memposisikan gambar latar belakang Anda harus menggunakan
background-position
properti. Properti background-position mengatur posisi awal gambar latar belakang daritop
danleft
sisi 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
50px
akan 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-size
adalah properti baru dan dalam kode terkompresi apa itu/cover
tetapi kode ini berartifill
ukuran latar belakang dan pemosisian di latar belakang desktop windows.Anda dapat melihat lebih detail tentang
background-position
di sini danbackground-size
di sini .sumber
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.
sumber
Ini bekerja untuk saya:
#doit{ background-image: url('images/pic.png'); background-repeat: no-repeat; background-position: center; }
sumber
Ini bekerja untuk saya:
.network-connections-icon { background-image: url(url); background-size: 100%; width: 56px; height: 56px; margin: 0 auto; }
sumber
margin: 0 auto;
di manaauto
membuatnya berada di tengah secara horizontal di dalam div. Terima kasih!Ini bekerja untuk saya:
<style> .WidgetBody { background: #F0F0F0; background-image:url('images/mini-loader.gif'); background-position: 50% 50%; background-repeat:no-repeat; } </style>
sumber
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; }
sumber