Cara membuat warna dan gambar background menggunakan CSS

Setelah belajar penulisan css secara internal, eksternal maupun inline maka saatnya kita mengenal properti-properti yang ada di css. Kali ini kita akan membahas properti background. Properti ini sebenarnya terdiri dari banyak jenis namun yang penting dan akan dibahas pada tutorial kali ini ada dua.
  1. background-color
  2. background-image
Kita semua pasti sudah mengenal background atau latar belakang. Umumnya latar belakang menggunakan warna atau gambar. Namun yang paling sering digunakan pada halaman web adalah warna karena hemat memori sehingga proses loading cepat. Tidak ada salahnya dibeberapa bagian kita menggunakan background gambar misal nya dibagian header web. Orang sering menggunakan gambar atau spanduk yang didesain dengan photoshop disana. Jadi sah-sah saja menggunakan background gambar asal tidak terlalu banyak. Background image sendiri terbagi menjadi 2.
  1. Warna gradient
  2. Gambar
Dimana kita menempatkan background solid atau gradien terserah kita tergantung tingkat keilmuan desain kita hehe. Sekarang mungkin ada pertanyaan untuk kita, dimana sebenarnya background ini diletakkan pada tag html?. jawabannya bebas namun yang paling sering adalah.
  • tag body
  • bagian kolom/kotak/cell

#background-color (solid)
<!DOCTYPE html>
<html>
<head>
<title>Background CSS</title>
<link rel="stylesheet" type="text/css" href="stylebg.css">
</head>
<body>
<h1>Menggubah warna background tag body dengan css</h1>
</body>
</html>

Selanjutnya buat file stylebg.css.
body{
background-color: rgb(159, 100, 200);
}
Disni kita mencoba membuat warna dengan metode RGB (red,green,blue) yang nilainya 0-255. Anda bisa mencoba membuat warna sendiri.


#background-image (gradien)
<!DOCTYPE html>
<html>
<head>
<title>Background CSS</title>
<link rel="stylesheet" type="text/css" href="stylebg.css">
</head>
<body>
<div class="kotak">
</div>
</body>
</html>

Selanjutnya ganti isi file stylebg.css.
.kotak{
background-image: linear-gradient(to right, #b3ffab, #0073ff);
width: 100%;
height: 600px;

}
Disini kita mencoba membuat warna gradien pada tag div. Untuk arah gradien bisa kita atur sendiri. Contoh diatas gradasi warna dari kiri ke kanan (to right).

#background-image(gambar)
<!DOCTYPE html>
<html>
<head>
<title>Background CSS</title>
<link rel="stylesheet" type="text/css" href="stylebg.css">
</head>
<body>
</body>
</html>

Selanjutnya ubah file stylebg.css.
body{
background-image: url('...');
}
untuk url gambarnya sesuaikan dengan url gambar anda. Sekian dan terima kasih.

Popular posts from this blog

Cara Membuat Kalkulator Dengan Java Script

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

Aplikasi CRUD menggunakan Template Admin LTE