Apakah mungkin untuk mengatur ukuran gambar latar belakang dengan CSS?
Saya ingin melakukan sesuatu seperti:
background: url('bg.gif') top repeat-y;
background-size: 490px;Tapi sepertinya benar-benar salah melakukannya seperti itu ...
Jawaban:
Jika Anda ingin membuat gambar lebih besar, Anda harus mengedit gambar itu sendiri di editor gambar.
Jika Anda menggunakan tag img, Anda dapat mengubah ukurannya, tetapi itu tidak akan memberi Anda hasil yang diinginkan jika Anda membutuhkan gambar sebagai latar belakang untuk beberapa konten lain (dan itu tidak akan terulang seperti yang Anda inginkan) ...
Ini dimungkinkan untuk dilakukan di CSS3 dengan background-size.
Semua browser modern mendukung ini, jadi kecuali Anda perlu mendukung browser lama, ini adalah cara untuk melakukannya.
Browser yang didukung:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) dan Chrome 3.0+.
.stretch{
/* Will stretch to specified width/height */
background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
background-size: 100% 100%;
}
.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
background-size: Auto 150px;
}
.resize-fill-and-clip{
/* Resize to fill and retain aspect ratio.
Will cause clipping if aspect ratio of box is different from image. */
background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
Will cause gap if aspect ratio of box is different from image. */
background-size: contain;
}Secara khusus, saya suka coverdan containnilai-nilai yang memberi kita kekuatan kontrol baru yang tidak kita miliki sebelumnya.
Anda juga dapat menggunakan background-size: roundyang memiliki arti dalam kombinasi dengan pengulangan:
.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */
background-size: round auto; /* Height: auto is to keep aspect ratio */
background-repeat: repeat;
}Ini akan menyesuaikan lebar gambar sehingga cocok beberapa kali di area pemosisian latar belakang.
Catatan tambahan
Jika ukuran yang Anda butuhkan adalah ukuran piksel statis, masih pintar untuk mengubah ukuran gambar yang sebenarnya. Ini untuk meningkatkan kualitas ukuran (mengingat bahwa perangkat lunak gambar Anda melakukan pekerjaan yang lebih baik daripada browser), dan untuk menghemat bandwidth jika gambar asli lebih besar dari apa yang ditampilkan.
Hanya CSS 3 yang mendukung itu,
background-size: 200px 50px;Tapi saya akan mengedit gambar itu sendiri, sehingga pengguna perlu memuat lebih sedikit, dan mungkin terlihat lebih baik daripada gambar menyusut tanpa antialiasing.
background: url('resized_image.png')\9;untuk IE lt 9
Jika pengguna Anda hanya menggunakan Opera 9.5+, Safari 3+, Internet Explorer 9+ dan Firefox 3.6+ maka jawabannya adalah ya. Kalau tidak, tidak.
The background-size properti merupakan bagian dari CSS 3, tapi itu tidak akan bekerja pada kebanyakan browser.
Untuk keperluan Anda, buat gambar yang sebenarnya lebih besar.
Tidak mungkin . Latar belakang akan selalu sebesar mungkin, tetapi Anda dapat menghentikannya agar tidak terulang kembali background-repeat.
background-repeat: no-repeat;Kedua, latar belakang tidak masuk ke area margin kotak, jadi jika Anda ingin latar belakang hanya pada isi kotak yang sebenarnya, Anda dapat menggunakan margin bukannya padding.
Ketiga, Anda dapat mengontrol di mana gambar latar belakang dimulai. Secara default itu adalah sudut kiri atas kotak, tetapi Anda dapat mengontrolnya dengan background-position, seperti ini:
background-position: center top;atau mungkin
background-position: 20px -14px;Penentuan posisi negatif banyak digunakan dengan sprite CSS .
Ada satu argumen yang terlupakan :
background-size: contain;Ini tidak akan meregang background-imageseperti yang akan Anda lakukan cover. Itu akan meregang sampai sisi yang lebih panjang mencapai lebar atau tinggi wadah luar dan karenanya menjaga gambar.
Sunting: Ada juga -webkit-background-sizedan -moz-background-size.
Properti ukuran latar belakang didukung di IE9 +, Firefox 4+, Opera, Chrome, dan Safari 5+.
Untuk mendukung jawaban yang diberikan @tetra, saya ingin menunjukkan bahwa jika gambar adalah SVG, maka mengubah ukuran gambar yang sebenarnya tidak diperlukan.
Karena file SVG hanya XML, Anda dapat menentukan ukuran apa pun yang Anda inginkan muncul dalam XML.
Namun, jika Anda menggunakan gambar SVG yang sama di tempat yang berbeda dan membutuhkannya dengan ukuran yang berbeda, menggunakan background-sizeitu sangat membantu. File SVG secara inheren lebih kecil daripada gambar raster dan mengubah ukuran dengan cepat dengan CSS bisa sangat membantu tanpa biaya kinerja yang saya ketahui, dan tentu saja sedikit atau tidak ada kehilangan kualitas.
Ini adalah contoh cepat:
<div class="hasBackgroundImage">content</div>
.hasBackgroundImage
{
background: transparent url('/image/background.svg') no-repeat 10px 5px;
background-size: 1.4em;
}(Catatan: ini berfungsi untuk saya di OS X 10.7 dengan Firefox 8, Safari 5.1, dan Chrome 16.0.912.63)
Anda benar-benar bisa menggunakan CSS3:
body {
background-image: url(images/bg-body.png);
background-size: 100%; /* size the background image at 100% like any responsive img tag */
background-position: top center;
background-repeat:no-repeat;
}Ini akan ukuran gambar latar belakang hingga 100% dari lebar elemen tubuh dan kemudian akan kembali ukuran latar sesuai dengan elemen tubuh kembali ukuran untuk resolusi yang lebih kecil.
Berikut adalah contohnya: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/
Hanya saja div bersarang agar cross browser kompatibel
<div>
<div style="background: url('bg.gif') top repeat-y;min-width:490px;">
Put content here
</div>
</div>
Anda dapat menggunakan dua <div>elemen:
Salah satunya adalah sebuah wadah (ini adalah wadah yang awalnya Anda inginkan untuk menampilkan gambar latar belakang).
Yang kedua terkandung di dalamnya. Anda mengatur ukurannya ke ukuran gambar latar belakang (atau ukuran yang ingin Anda tampilkan).
Div yang terkandung kemudian diatur untuk diposisikan absolute . Dengan cara ini tidak mengganggu aliran normal item dalam div yang berisi.
Ini memungkinkan Anda untuk menggunakan gambar sprite secara efisien.
put the below code in the body of you css file
background-image: URL('../images/wave-green-plain-colour.jpg') ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100px;Anda telah menulis
background: url('bg.gif') top repeat-y;
background-size: 490px;tetapi Anda hanya akan melihat latar belakang tergantung pada ukuran wadah.
jika Anda memiliki wadah kosong dengan url latar belakang dan apa pun ukuran latar belakangnya, Anda tidak akan melihat bg.gif.
Jika Anda mengatur ukuran kontiner ke
background: url('bg.gif') top repeat-y;
background-size: 490px;
height: 490px;
width: 490px;digabungkan dengan kode yang Anda tulis di atas, Anda akan dapat melihat file bg.gif.
Saya menggunakan gambar latar belakang untuk tombol, tetapi hanya menampilkan gambar dengan ukuran yang sama dengan teks, bahkan jika saya mengatur lebar dan tinggi. Sebagai gantinya, saya menulis teks saya dengan karakter (spasi yang tidak putus). Saya menampar sebanyak yang diperlukan, pada dasarnya, sampai semua latar belakang tombol muncul. Jadi saya mungkin punya kode seperti ini:
Di lembar gaya:
#v2menu-home {
background-image:url(../v2-siteimages/button.png);
background-repeat:no-repeat;
}Dalam dokumen HTML:
<div id="v2menu">
<a id="v2menu-home" href="/index.php">home </a>
</div><!-- v2menu -->Misalnya:
Gambar latar akan selalu sesuai dengan ukuran wadah (lebar 100% dan tinggi 100px).
CSS lintas-browser:
.app-header {
background: url("themes/default/images/background.jpg") no-repeat;
-moz-background-size: 100% 100px;
-webkit-background-size: 100% 100px;
-o-background-size: 100% 100px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "themes/default/images/background.jpg", sizingMethod = 'scale');
background-size: 100% 100px;}
Hal ini dimungkinkan untuk dilakukan di CSS3 dengan ukuran latar belakang
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}Jika Anda ingin mengatur background-sizedi backgroundproperti yang sama Anda dapat menggunakan gunakan:
background:url(my-bg.png) no-repeat top center / 50px 50px;