Example
Specify the size of a background-image with "auto" and in pixels:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The background-size property specifies the size of the background images.
There are four different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height), and the multiple background syntax (separated with comma).
Show demo ❯
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
background-size | 4.0 1.0 -webkit- | 9.0 | 4.0 3.6 -moz- | 4.1 3.0 -webkit- | 10.5 10.0 -o- |
CSS Syntax
background-size: auto|length|cover|contain|initial|inherit;
Property Values
auto | Default value. The background image is displayed in its original size | Demo ❯ |
length | Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units | Demo ❯ |
percentage | Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" | Demo ❯ |
cover | Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges | Demo ❯ |
contain | Resize the background image to make sure the image is fully visible | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Specify the size of a background image with percent:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75% 50%;
}
Try it Yourself »
Example
Specify the size of a background image with "cover":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Try it Yourself »
Example
Specify the size of a background image with "contain":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain;
}
Try it Yourself »
Example
Here we have two background images. We specify the size of the first background image with "contain", and the second background-image with "cover":
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain, cover;
}
Try it Yourself »
Example
Use different background properties to create a "hero" image:
.hero-image {
background-image:
url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Backgrounds
HTML DOM reference: backgroundSize property
Pada tutorial sebelumnya kita telah belajar tentang property color pada CSS dan juga nilai apa saja yang bisa digunakan padanya. Dan pada kesempatan kali ini kita akan belajar tentang property background pada CSS
dan cara menggunakannya. Secara umum, property background pada CSS berfungsi untuk memberi dan mengatur tampilan latarbelakang atau background pada sebuah Tag atau Element HTML.
Jika anda memperhatikan dengan baik kode yang saya tulis pada tutorial-tutorial sebelumnya, disitu saya sangat sering menggunakan property background-color yang mana properti background-color ini merupakan salah satu dari beberapa macam properti background yang terdapat pada kode CSS.
Di dalam CSS terdapat beberapa macam properti background yang bisa kita gunakan untuk membuat, mengatur dan memodifikasi background halaman sebuah website. Diantara property background tersebut adalah background-color, background-image, background-repeat, background-position dan background attachment.
Masing-masing property tersebut memiliki nilai yang berbeda-beda dan kita akan membahas property-property tersebut satu persatu beserta nilainya.
Sebelum kita mulai, jangan lupa untuk mempersiapkan dan memastikan teks editor dan browser anda bisa berfungsi dengan baik, kemudian buatlah sebuah folder baru didesktop anda dengan nama belajar_property_background_css untuk menyimpan file yang kita buat nanti, in sya aLLAH.
folder belajar_property_background_cssTanpa berlama-lama lagi mari kita langsung mulai saja pembahasannya.
Mengenal Beberapa Macam Property Background dan Nilai Yang Bisa Digunakan Padanya
Background-color
Property background-color berfungsi untuk memberikan warna latarbelakang atau warna background pada sebuah Tag atau Element HTML.
Secara asal tidak semua Tag atau Element HTML memiliki atribut untuk memberi atau mengganti warna background, akan tetapi dengan property background-color ini kita bisa membuat atau mengganti warna asal background pada Tag atau Element HTML yang mana saja yang kita inginkan.*
Dalam penggunaannya, property background-color ini memiliki beberapa macam nilai yang bisa kita gunakan padanya, diantaranya yaitu :
- Warna : baik berupa Nama Warna ataupun kode-kode warna lainnya yang telah kita bahas pada tutorial sebelumnya. Nilai ini digunakan untuk memberikan warna tertentu pada sebuah Tag atau Elemnt HTML.
contoh penulisan :
background-color: nama_atau_kode_warna;
2. Initial : warna default atau warna asal. Digunakan untuk memberikan atau mengembalikan warna default dari sebuah Tag atau Element HTML.
contoh penulisan :
background-color: initial;
3. Inherit : warna turunan. Digunakan untuk memberikan warna yang sama dengan warna dengan warna Tag atau Element HTML yang memuatnya
background-color: inherit;
4. Tranparent : warna transparan. Digunakan untuk memberikan warna transparan pada sebuah Tag atau Element HTML.
background-color: transparent;
Untuk contoh penerapannya silahkan buka teks editor anda (buat file baru) lalu ketikkan atau copy-paste kode dibawah ini:
<html> <head> <title>Belajar Menggunakan Property background-color</title> </head> <body> <style> body { background-color: teal; } td { font-size : 30px; text-align : center; color : #000000; font-weight : bold; } .merah { background-color : red; } .hijau { background-color : #00ff00; } .biru { background-color : rgb(0,0,255); } .kuning { background-color : #ffff00; } .ungu { background-color : purple; } </style> </head> <body> <table border="0" cellpadding="80px" align="center"> <tr> <td class="merah"> Merah </td> <td class="kuning"> kuning </td> <td class="hijau"> hijau </td> <td class="biru"> biru </td> <td class="ungu"> ungu </td> </tr> </table> </body> </html>Kemudian simpan dengan nama background_color.html didalam folder belajar_property_background_css lalu jalankan dibrowser anda, maka hasilnya kira-kira seperti ini :
hasil penerapan property background-colorUntuk nilai yang lain anda bisa mencobanya sendiri dengan mengubah nilai warna menjadi nilai yang mana saja yang ingin anda coba dari ketiga nilai diatas atau anda bisa membuat file baru untuk mencobanya.
Background-image
Selain menggunakan background warna, kita juga bisa menggunakan background gambar untuk mempercantik tampilan website kita.
Dalam CSS terdapat property background-image yang berfungsi untuk memberikan tampilan bakcground berupa gambar pada sebuah website.
Sebenarnya untuk dapat mengganti gambar background sebuah website kita bisa menggunakan atribut background pada HTML, akan tetapi dengan menggunakan CSS kita akan lebih leluasa untuk mengatur background gambar tersebut dan bahkan kita bisa memberikan gambar background pada Tag atau Element HTML yang tidak memiliki atribut tersebut.
Ada beberapa macam nilai yang bisa digunakan pada property background-image ini, diantaranya :
- url(nama_atau_letak_gambar) : Nilai ini berfungsi untuk mencari dan menemukan gambar yang akan kita jadikan sebagai background.
contoh penulisan :
background-image: url('nama_atau_letak_gambar');
2. Initial : Nilai ini berfungsi untuk memberikan nilai gambar background secara default.
contoh penulisan :
background-image: initial;
3. Inherit : Nilai ini digunakan untuk memberikan gambar yang sama dengan gambar pada Tag atau Element HTML yang memuatnya.
background-image: inherit;
4. none : Tanpa background. Ini adalah nilai default.
background-image: none;
Untuk mengetahui penggunaan property background-image ini mari kita buat sebuah file HTML baru. Namun sebelumnya silahkan anda klik kanan pada gambar dibawah ini lalu pilih save-as :
gambar background untuk bahan praktekKemudian simpan di folder belajar_background_image_css dengan nama bg.jpg.
Setelah itu silakan buka teks editor Anda lalu ketikkan atau copy paste kode dibawah ini:
Kemudian Simpan dengan nama background_image.html lalu jalankan di browser anda maka hasilnya kira-kira seperti ini:
hasil penerapan property background-imageUntuk nilai yang lain silahkan anda coba praktekkan sendiri untuk melihat hasilnya, baik dengan mengubah nilai background_image diatas atau dengan membuat sebuah file baru.
Nah, itulah tutorial mengubah tampilan background dengan CSS.
Bagaimana? Sangat mudah untuk dipahami dan dipraktekkan bukan?
Setelah kita mengerti dan telah berhasil mempraktekkan cara membuat background berupa gambar, maka selanjutnya kita akan mempelajari cara mengatur background gambar tersebut dengan beberapa property lain yaitu property background-repeat, background-position dan background-attachment.
Penasaran dengan ketiga property tersebut? langsung saja klik disini untuk membaca tutorialnya
Semoga bermanfaat.