CSS

Background Shorthand di CSS: Ringkasan Belajar Background

Latar belakang CSS – Properti singkatan

Properti background CSS shorthand digunakan untuk mempersingkat kode yang emungkinkan kita untuk memnemtukan semua properti background dalam satu properti tungggal.

Tidak menulis seperti ini:

body {
  background-color: #ffffff;
  background-image: url("https://dosenit.com/wp-content/uploads/2020/10/cartoon_mobile_phone.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Kita bisa gunakan properti background shorthand, seperti berikut :

Contoh
Gunakan properti shorthand untuk menyetel properti background dalam satu deklarasi:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background: #ffffff url("https://dosenit.com/wp-content/uploads/2020/10/cartoon_mobile_phone.png") no-repeat right top;
  margin-right: 200px;
}
</style>
</head>
<body>

<h1> Properti Background CSS </h1>

<p> Properti shorthand background adalah properti singkatan untuk menetapkan semua properti background dalam satu deklarasi. </p>

<p> Di sini, gambar latar hanya ditampilkan sekali, dan juga ditempatkan di pojok kanan atas. </p>

<p> kita juga telah menambahkan margin kanan, sehingga teks tidak akan menutupi gambar latar belakang. </p>


</body>
</html>

Saat menggunakan properti shorthand, urutan nilai properti adalah:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Tidak masalah jika salah satu nilai properti hilang, selama yang lain ada dalam urutan ini. Perhatikan bahwa kita tidak menggunakan properti background-attachment dalam contoh di atas, karena tidak memiliki nilai.

All CSS Background Properties

PropertiDeskripsi
backgroundSetel semua properti latar belakang dalam satu deklarasi
background-attachmentMenyetel gambar latar belakang tetap atau bergulir dengan sisa halaman
background-clipMenentukan area lukisan latar belakang dengan sisa halaman
background-colorMenyetel warna latar belakang suatu elemen
background-imageMenyetel gambar latar belakang untuk suatu elemen
background-originMenentukan di mana gambar latar belakang diposisikan
background-positionMenetapkan posisi awal gambar latar belakang
background-repeatMenyetel gambar latar akan diulang
background-sizeMenentukan ukuran gambar latar belakang

Hanifah Nurbaeti

Share
Tags: BackgroundCSScss background