Untuk menambahkan gambar latar belakang pada elemen HTML, gunakan atribut HTML style dan properti CSS background-image
Contoh
Tambahkan gambar latar belakang pada elemen HTML
Cobalah sendiri "Anda juga dapat menentukan gambar latar belakang di
Try it Yourself »Background Image on a Page
If you want the entire page to have a background image, you must specify the background image on the element:
Example
Add a background image for the entire page:
Try it Yourself »Background Repeat
If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element:
Example
Try it Yourself »To avoid the background image from repeating itself, set the background-repeat properti ke no-repeat
Contoh
Cobalah sendiri "Sampul latar belakang
Jika Anda ingin gambar latar menutupi seluruh elemen, Anda dapat menyetel properti background-size ke cover.
Selain itu, untuk memastikan seluruh elemen selalu tertutup, setel properti background-attachment ke fixed:
Dengan cara ini, gambar latar belakang akan menutupi seluruh elemen, tanpa peregangan (gambar akan mempertahankan proporsi aslinya)
Contoh
Cobalah sendiri "Peregangan Latar Belakang
Jika Anda ingin gambar latar direntangkan agar sesuai dengan seluruh elemen, Anda dapat menyetel properti background-size ke background-image0
Coba ubah ukuran jendela browser, dan Anda akan melihat bahwa gambar akan melebar, tetapi selalu menutupi seluruh elemen
Contoh
Cobalah sendiri "Pelajari Lebih Lanjut CSS
Dari contoh di atas Anda telah belajar bahwa gambar latar belakang dapat ditata dengan menggunakan properti latar belakang CSS
Background adalah tampilan background dari sebuah elemen HTML. Elemen HTML secara visual memiliki dua tampilan yaitu tampilan bagian teks (foreground) dan tampilan bagian background (latar belakang). Pada bagian body tag, secara default warna background putih dengan teks berwarna hitam. Dan pada semua elemen lainnya, warna latar belakang adalah nilai warna transparan. Nilai ini akan membuat bagian teks dari elemen tersebut hanya muncul ketika ada elemen HTML lain di belakangnya
Pengaturan background pada halaman web merupakan hal yang penting untuk menciptakan tampilan yang menarik. Secara umum, latar belakang elemen HTML biasanya berupa nilai warna. Namun, seringkali ditemukan bahwa halaman web menggunakan gambar sebagai tampilan latar belakang. Penggunaan gambar sebagai background bisa diterapkan pada seluruh badan halaman atau hanya bagian-bagian seksi tertentu saja
Setting gambar sebagai background image dapat menggunakan bantuan CSS. Gambar yang digunakan sebagai background bisa dalam format jpg, png atau gif. CSS menerima input berupa gambar duplikat dalam pengaturan tampilan background. Gambar di atas gambar pertama harus dalam format png dengan nilai transparan agar gambar di belakangnya dapat terlihat
Mempersiapkan Gambar sebagai Latar Belakang
Hal pertama yang perlu disiapkan adalah gambar yang akan digunakan sebagai elemen background. Gambar nantinya akan ditempatkan di belakang teks sebagai gambar latar belakang
Anda dapat menggunakan gambar dalam png, jpg, gif, dan format lain yang didukung oleh HTML. Ukuran gambar juga perlu diperhatikan agar gambar dapat menempati wadah elemennya tanpa terpotong. Jika Anda menggunakan gambar ukuran kecil misalnya ukuran 110px x 110px, Anda bisa menggunakan bantuan properti background-repeat agar perulangan gambar bisa diatur
Berikut adalah gambar-gambar yang digunakan sebagai bahan uji
Menggunakan Latar Belakang Dengan Gambar Pada CSS
CSS memiliki properti background-image yang digunakan untuk mengatur gambar sebagai latar belakang elemen HTML. Properti ini menerima input berupa URL tempat file gambar berada. Anda dapat menggunakan tulisan background hanya sebagai shortcut (singkatan) tetapi harus diisi dengan nilai yang sama seperti pada background-image
Sintaks penulisan
gambar latar belakang. URL. tidak ada. mewarisi;
Nilai URL adalah nilai sebagai referensi alamat URL tempat gambar berada. Nilai none adalah nilai default agar tidak menggunakan gambar sebagai latar belakang. Nilai waris adalah nilai turunan sehingga nilainya sama dengan nilai elemen induknya
Misalnya misalnya
div { gambar latar belakang. url("img/wallpaper. png");}
div { gambar latar belakang. url("img/gambar. png"), url("img/wallpaper. png");}
div { gambar latar belakang. tidak ada;}
Contoh pertama digunakan untuk mengatur background dengan total satu gambar. Sedangkan contoh kedua digunakan jika ingin menggunakan gambar ganda dan dipisahkan dengan koma
Berikut adalah penggunaan background-image pada sebuah elemen
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Background Image CSS
Selamat Datang
Di Websiteku
Penataan Gambar Dengan Ulangi Latar Belakang
Gambar latar secara default akan diulang sesuai dengan lebar wadah. Pengulangan citra dilakukan secara horizontal dan vertikal. Untuk mengatur perulangan background image, Anda bisa menggunakan properti background-repeat
Sintaks penulisan
background-repeat. ulang. no-repeat. ulangi-x. ulangi-y. bulat. mewarisi;
Nilai pengulangan adalah nilai default yang akan mengulang gambar secara horizontal dan vertikal. Nilai no-repeat akan menonaktifkan pengulangan gambar. Nilai repeat-x akan mengulang gambar secara horizontal. Nilai repeat-y akan mengulang gambar secara vertikal. Nilai bulat akan membulatkan posisi gambar agar gambar yang ditampilkan tidak terpotong
Berikut adalah contoh penggunaan properti background-repeat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
Background Image CSS
Background Repeat : repeat
Background Repeat : no-repeat
Background Repeat : repeat-x
Background Repeat : repeat-y
Background Repeat : round
Hasil skrip
Ulangi Latar Belakang. ulang
Ulangi Latar Belakang. no-repeat
Ulangi Latar Belakang. ulangi-x
Ulangi Latar Belakang. ulangi-y
Ulangi Latar Belakang. bulat
Penataan Gambar Dengan Posisi Latar Belakang
Gambar latar belakang secara default akan ditempatkan di sisi kiri atas layar. Pada gambar dengan ukuran yang cukup besar mungkin tidak terlalu berpengaruh, namun untuk ukuran gambar yang kecil perlu dilakukan penyesuaian posisi gambar. Setting gambar background bisa menggunakan properti background-position
Pengetikan sintaks
background-position. kiri atas. tengah atas. kanan atas. kiri tengah. tengah. tengah kanan. kiri bawah. tengah bawah. kanan bawah. atas. bawah. mewarisi;
Nilai kiri atas berarti gambar ditempatkan di kiri atas layar. Nilai tengah atas berarti bahwa gambar ditempatkan di posisi tengah atas. Nilai-nilai lain sesuai dengan artinya sendiri