Cara menggunakan background gambar html

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. mengulang. 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. mengulang

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. dasar. 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

Cara menyisipkan gambar background Background

Apa tag HTML yang benar untuk menambahkan warna latar belakang?

Apa tag yang tepat untuk menambahkan gambar latar belakang?

Apa itu latar belakang?