Codingku

background-image

Properti background-image mengatur gambar latar belakang suatu elemen.

Properti ini menerima satu nilai gambar atau beberapa nilai yang dipisahkan koma.

Ketika lebih dari satu background diatur, masing-masing gambar berukuran, diposisikan, dan ditata sesuai dengan nilai yang sesuai di properti background lainnya.

Gambar-gambar tersebut kemudian ditumpuk di atas satu sama lain dengan yang pertama berada di atas yang lain.

Saat mengatur gambar background, kamu juga harus menentukan warna background yang akan digunakan ketika gambar tidak tersedia.

CSS Syntax

background-image: url | none | initial | inherit;

Javascript Syntax

object.style.backgroundImage="url(img_tree.gif)"

default background-image: none;

Menghapus gambar latar belakang apa pun.

background-image: url(/images/jt.png);

Menggunakan gambar yang ditentukan dalam path url . Path ini dapat berupa relatif (ke file css) atau absolut (seperti https://codingku.id/images/jt.png).

background-image: linear-gradient(red, blue);

Kamu dapat menetapkan gradien linier sebagai gambar latar belakang.

Kamu harus menetapkan setidaknya dua warna . Yang pertama akan dimulai dari atas, yang kedua di bawah.

Sudut default adalah ke bawah (atau 180deg ), yang berarti gradiennya adalah vertikal , mulai dari atas, berakhir di bagian bawah elemen.

background-image: linear-gradient(45deg, red, blue);

Kamu dapat menentukan sudut , baik dalam derajat , atau dengan kata kunci.

Saat menggunakan degress, Kamu menentukan arah dari gradien, atau ketika itu berakhir. Jadi 0deg berarti atas elemen, seperti 12:00 pada jam.

Dalam contoh ini, 45deg berarti 2:30, atau sudut kanan atas.

background-image: radial-gradient(green, purple);

Kamu dapat menetapkan gradien radial sebagai gambar latar belakang.

Kamu harus menetapkan setidaknya dua warna . Yang pertama ada di tengah, yang kedua di tepi.

background-image: radial-gradient(circle, green, purple);

Kamu dapat menentukan bentuk dari gradien radial: lingkaran atau ellipse (default).

background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);

Kamu dapat menentukan penghentian warna menggunakan nilai persentase.

background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);

Kamu dapat menentukan di mana gradien seharusnya diakhiri :

  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner

background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);

Seperti background-position, Kamu dapat menentukan posisi dari gradien.

See the Pen Contoh #1 background-images by Codingku (@codingku) on CodePen.