Background dan Images CSS

Petik.net - Background dan Images CSS adalah teknik yang digunakan untuk mengatur tampilan background dan gambar pada halaman web. Dalam Background dan Images CSS, kita dapat menentukan warna latar belakang, gambar latar belakang, ukuran dan posisi gambar, serta filter gambar.

Menentukan Background Color CSS

Background color CSS digunakan untuk menentukan warna latar belakang pada halaman web. Kita dapat menentukan background color pada tag < body > untuk menentukan warna latar belakang pada seluruh halaman web.

body {
  background-color: #ffffff;
}

Pada contoh di atas, kita menggunakan warna putih (#ffffff) sebagai background color pada tag < body >.

Menentukan Background Image CSS

Background image CSS digunakan untuk menentukan gambar latar belakang pada halaman web. Kita dapat menentukan background image pada tag < body > dengan menggunakan property background-image.

body {
  background-image: url('gambar.jpg');
}

Pada contoh di atas, kita menggunakan gambar bernama gambar.jpg sebagai background image pada tag < body >.

Menentukan Ukuran dan Posisi Background Image CSS

Selain menentukan gambar latar belakang, kita juga dapat mengatur ukuran dan posisi gambar latar belakang pada halaman web. Kita dapat menggunakan property background-size, background-repeat, dan background-position pada tag < body > untuk mengatur ukuran dan posisi gambar latar belakang.

body {
  background-image: url('gambar.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

Pada contoh di atas, kita menggunakan property background-size: cover untuk mengatur ukuran gambar latar belakang sehingga gambar menutupi seluruh area background. Selain itu, kita juga menggunakan property background-repeat: no-repeat untuk mengatur agar gambar latar belakang tidak diulang-ulang. Terakhir, kita menggunakan property background-position: center untuk mengatur posisi gambar latar belakang menjadi ditengah.

Menentukan Filter Image CSS

Filter image CSS digunakan untuk memodifikasi tampilan gambar pada halaman web, seperti mengubah warna, kecerahan, kontras, dan lain sebagainya. Kita dapat menggunakan property filter pada tag < img > atau pada background image pada tag < body > untuk menentukan filter pada gambar.

img {
  filter: grayscale(100%);
}

Pada contoh di atas, kita menggunakan property filter: grayscale(100%) untuk mengubah tampilan gambar menjadi hitam-putih. Selain grayscale, terdapat beberapa nilai filter lainnya seperti blur, brightness, contrast, hue-rotate, dan lain sebagainya.