Background Border Html Css

MUAZHAN

3 min read

·

Jul 03, 2024

26

Share

Menambahkan Background dan Border pada Elemen HTML dengan CSS

Background dan border merupakan elemen penting dalam desain web yang dapat memberikan tampilan yang menarik dan profesional pada halaman web Anda. Dengan CSS, kita dapat mengatur berbagai aspek dari background dan border seperti warna, gambar, ukuran, dan gaya.

Menambahkan Background

Untuk menambahkan background pada suatu elemen HTML, kita dapat menggunakan properti background dalam CSS. Properti ini memiliki beberapa sub-properti yang dapat digunakan secara bersamaan:

• background-color: Mengatur warna background elemen.
• background-image: Menambahkan gambar sebagai background elemen.
• background-repeat: Mengatur cara gambar diulang pada elemen.
• background-position: Mengatur posisi gambar pada elemen.
• background-size: Mengatur ukuran gambar pada elemen.

Contoh penggunaan:

/* Mengatur warna background menjadi biru muda */
div {
  background-color: lightblue;
}

/* Menambahkan gambar sebagai background dan mengatur repeat menjadi no-repeat */
body {
  background-image: url("images/background.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

Menambahkan Border

Untuk menambahkan border pada suatu elemen HTML, kita dapat menggunakan properti border dalam CSS. Properti ini memiliki beberapa sub-properti yang dapat digunakan secara bersamaan:

• border-width: Mengatur lebar border.
• border-style: Mengatur gaya border (solid, dashed, dotted, etc.).
• border-color: Mengatur warna border.

Contoh penggunaan:

/* Mengatur border dengan lebar 5px, gaya solid, dan warna merah */
p {
  border: 5px solid red;
}

/* Mengatur border pada sisi atas dan bawah dengan lebar 2px, gaya dashed, dan warna biru */
h1 {
  border-top: 2px dashed blue;
  border-bottom: 2px dashed blue;
}

Tips Tambahan

• Gunakan border-radius untuk membuat sudut border menjadi bulat.
• Gunakan box-shadow untuk menambahkan efek bayangan pada elemen.
• Gunakan background-attachment untuk mengatur bagaimana gambar background bereaksi terhadap scrolling.
• Eksperimen dengan berbagai kombinasi properti untuk menciptakan desain yang unik.

Dengan memahami dasar-dasar penggunaan background dan border dalam CSS, Anda dapat dengan mudah menambahkan sentuhan yang menarik dan profesional pada halaman web Anda.