Mempelajari Properti Backround CSS
Property backround pada CSS digunakan untuk membuat backround, didalam bahasa indonesia backround adalah latar belakang.
Backround adalah salah satu elemen penting didalam kita membuat desain front end dari sebuah website, dengan backround yang seimbang dan sesuai dengan tema dari website yang kita buat maka user/pengunjung web semakin betah untuk mengunjungi website dan berlama-lama.
Didalam CSS property backround sendiri terdapat beberapa property yang bisa digunakan yakni backround-color, backround-image, backround-reapet, backround-position, backround-size dan masih ada lagi.
Disini kita akan membahas property backround CSS yang sering digunakan didalam CSS, agar lebih cepat kita memahami dan cara menggunakan CSS Backround.
Buat dua buah file latihan_css.html untuk kode html dan style.css tempat kode css
latihan_css.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Latihan CSS ilmuweb.NET</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur, incidunt, iure nobis nihil quia tenetur
deserunt officia labore tempora repudiandae at! Nostrum corrupti ducimus aperiam vel ut nisi eum quas.</p>
</body>
</html>
Pada koding diatas perhatikan jangan sampai salah didalam membuat link ke kode CSS agar style dapat terhubung halaman latihan html dengan dengan tag untuk menghubungkan ke CSS :
<link rel="stylesheet" href="style.css">
style.css
body {
background-color: white;
background-image: url(img/diamond_upholstery.png);
/* background-repeat: no-repeat; */
}
h1 {
font-family: arial;
font-style: italic;
color: blue;
}
p {
font-family: arial;
}
Keterangan pada Pada kode CSS style.css diatas pertama kita memberikan warna backround warna putih, untuk jenis warna bisa ditulis dengan warna dengan bahasa inggris, disini saya gunakan warna white, teman-teman bisa mencoba mengganti warna sesuai kebutuhan, bisa juga warna backround dapat ditulis dengan kode 6 digit, daftar warna dengan mengambil kode bisa dilihat disini. Untuk nackround image seperti pada gambar di atas, dengan mengambil backround pada path di folder img, disini teman-teman bisa mengambil contoh gambar dari komputer teman masing-masing.
Selanjutnya selector dengan h1 dengan property CSS kita membua tulisan dengan warna biru, font-style italic, dan jenis font arial.
Kemudian untuk paragraf saya buat dengan jenis font-family arial.
Hasilnya adalah sebagai berikut.
Ok sekian dulu teman-teman, sekian dulu tutorial ini, semoga bermanfaat dan teman-teman bisa membuat warna pada halaman, menambahkan backround pada halaman, dan berbagai property text pada CSS.
Untuk lebih lanjut teman-teman dapat mempelajari property backround CSS lainya bisa di coba-coba dengan mengunjugi CSS-trik di sini dan daftar kode warna bisa dilihat disini Color-Picker.
Download File latihan CSS Bakround.
