cara menambahkan background di html
pada tutorial membuat halaman html sederhana hanya menampilkan teks saja tanpa ada background di html
menambahkan background di html adalah salah satu tugas paling umum saat kita mengerjakan Desain Web.
ada berbagai cara untuk menambahkan background di html, langsung saja simak tutorial berikut ini.
Cara menambahkan background dengan warna
sebelum adanya HTML 5 untuk menambahkan backgrund warna cukup menambahkan atribut bgcolor, namun cara tersebut sekarang sudah ditinggalkan.
untuk menambahkan background warna sekarang menggunakan CSS seperti dibawah ini.
ada dua cara untuk menambahkan background
pertama dengan inline style
<!DOCTYPE html>
<html>
<head>
<title> menambahkan background dengan warna </title>
</head>
<body style="background-color:skyblue">
<ul>
<li>Data Rahasia 1</li>
<li>Data Rahasia 2</li>
<li>Data Rahasia 3</li>
</ul>
</body>
</html>Code language: HTML, XML (xml)kedua dengan internal style
<!DOCTYPE html>
<html>
<head>
<title> menambahkan background dengan warna </title>
<style>
body {
background-color:skyblue
}
</style>
</head>
<body>
<ul>
<li>Data Rahasia 1</li>
<li>Data Rahasia 2</li>
<li>Data Rahasia 3</li>
</ul>
</body>
</html>Code language: HTML, XML (xml)kedua cara diatas hasilnya akan sama saja seperti gambar dibawah ini
style diatas akan membuat elemen yang berada di dalam tag <body> akan memiliki background berwarna langit biru
jika kita ingin menambahkan background di area tertentu misal di list kedua kita akan menambahkan background dengan memakai class di html
Baca juga : fungsi class pada html
<!DOCTYPE html>
<html>
<head>
<title> menambahkan background di bagian tertentu </title>
<style>
.bg-skyblue {
background-color:skyblue
}
</style>
</head>
<body>
<ul>
<li>Data Rahasia 1</li>
<li class="bg-skyblue">Data Rahasia 2</li>
<li>Data Rahasia 3</li>
</ul>
</body>
</html>Code language: HTML, XML (xml)
kenapa backgroundnya warna biru sampai full ? karena background warna ini akan memenuhi seluruh area tag list kedua, seperti saat kita menambahkan background di body maka seluruh area halaman akan berubah warnanya.
jika kita ingin hanya area teks saja yang memiliki background kita bisa menambahkan CSS max-width:max-content;
kamu bisa menambahkan sendiri dengan menekan tombol coba script warna biru dengan kode seperti dibawah ini
<style>
.bg-skyblue {
background-color:skyblue
max-width: max-content;
}
</style>Code language: HTML, XML (xml)maka hasilnya akan menampilkan background hanya di teks saja
Cara menambahkan background dengan gambar
untuk membuat background image berbeda, tidak sama dengan cara menambahkan warna, kita membutuhkan properti css background-image yang akan membuat gambar di latar belakang elemen html
<!DOCTYPE html>
<html>
<head>
<title> menambahkan background dengan gambar </title>
<style>
body {
background-image: url("https://thohirdev.com/images/posts/user.png");
}
</style>
</head>
<body>
<ul>
<li>Data Rahasia 1</li>
<li>Data Rahasia 2</li>
<li>Data Rahasia 3</li>
</ul>
</body>
</html>Code language: HTML, XML (xml)jika kita perhatikan kode diatas akan menampilkan gambar yang berulang sampai memenuhi lebar halaman.
apabila kita ingin menambahkan gambar hanya satu gambar menggunakan tambahan properti CSS background-repeat: no-repeat;
body {
background-image: url("https://thohirdev.com/images/posts/user.png");
background-repeat: no-repeat;
}Code language: CSS (css)setelah menambahkan properti tersebut akan menghasilkan tampilan dibawah ini.
Demikian tutorial cara menambahkan background di html, semoga bermanfaat