Tutorial properti background/ mengatur background pada bahasa CSS
Tutorial property background/ mengatur background pada bahasa pemrograman CSS
 |
| Tutorial properti backgroung CSS |
Seperti yang kita ketahui background atau latar belakang merupakan sebuah elemen utama yang berupa gambaran latar belakang suatu halaman website, agar terlihat lebih menarik dan tidak monoton.
Secara default background pada HTML adalah berwarna putih. Namun dengan menggunakan bahasa pemrograman CSS ini kita bisa mengubah background halaman website kita sesuai selera masing-masing.
Nah untuk itu jika teman ingin tau lebih banyak lagi bagaimana cara memainkan suatu background halaman website kita sesuai yang kita inginkan. Silahkan membaca dan pahami penjelasan kami dibawah ini.
Beberapa property untuk mengatur background
Ada beberapa properti background CSS yang dapat kita gunakan untuk merubah background menjadi lebih menarik seperti memberi warna background, memberi gambar, dan sifat lainnya. Propertinya sebagai berikut :Mengatur warna background di CSS
Kita dapat menentukan warna background sesuai apa yang kita inginkan menggunakan properti background-color, dan nilai yang digunakan properti ini yakni (nama warna, hexadecimal, RGB) yang sudah dibahas pada artikel cara mengatur teks pada CSS. Untuk lebih jelasnya perhatikan contoh berikut :File index.html
<!Doctype html>
<html>
<head>
<title> Belajar CSS </title>
<style type="text/css">
Body {
Background-color : lightblue;
}
</style>
</head>
<body>
<H1> Cara merubah warna background </H1>
</body>
</html>
<html>
<head>
<title> Belajar CSS </title>
<style type="text/css">
Body {
Background-color : lightblue;
}
</style>
</head>
<body>
<H1> Cara merubah warna background </H1>
</body>
</html>
Sesuai apa yang sudah kami katakan mengatur warna background dapat diatur dengan cara berikut, tinggal teman-teman pilih salah satunya.
body {
Background-color : blue ;
Background-color : #fdfdfd ;
Background-color : rgb (255, 0, 0) ;
}
Jika syntak html diatas dijalankan maka akan menampilkan seperti gambar berikut :Background-color : blue ;
Background-color : #fdfdfd ;
Background-color : rgb (255, 0, 0) ;
}
Memberi gambar pada background di CSS
CSS memiliki properti untuk memberikan gampar pada background suatu halaman. Properti yang digunkan adalah prorperti background-image dengan value nama file gambar disimpan atau bisa juga berupa url dari website lain yang dapat diakses secara online. Secara default gambar akan diulang. Perhatikan contoh berikut :File index.html
<!Doctype html>
<html><head>
<title> Belajar CSS </title>
<style type="text/css">
Body {
Background-image : url(“gambar/bg.jpg”);
}
</style>
</head>
<body>
<H1> Cara memberi gambar pada background </H1>
</body>
</html>
Pengulangan gambar pada background di CSS
Setelah kita mengetahui cara memberi gambar pada background. Adakala kita hendak mengulang gambar atau menduplikat gambar tersebut. Nah hal yang harus dilakukan akan adalah menggunakan properti background-repeat.Dengan valuenya berupa (no-repeat, repeat-x, repeat-y). repeat-c dapat mengulang gambar kesamping/ horizontal dan repeat-y dapat mengulang gambar kebawah/ vertikal untuk lebih jelasnya perhatikan contoh berikut :
File index.html
<!Doctype html>
<html>
<head>
<title> Belajar CSS </title>
<style type="text/css">
Body {
Background-image : url(“gambar/bg.jpg”);
Background-repeat : repeat-x;
}
</style>
</head>
<body>
<H1> Cara memberi gambar pada background </H1>
</body>
</html>
Jika dijalankan maka akan menampilkan seperti gambar berikut :<html>
<head>
<title> Belajar CSS </title>
<style type="text/css">
Body {
Background-image : url(“gambar/bg.jpg”);
Background-repeat : repeat-x;
}
</style>
</head>
<body>
<H1> Cara memberi gambar pada background </H1>
</body>
</html>
Mengatur posisi background gambar di CSS
Untuk mengatur posisi background gambar dapat menggunakan properti background-position. Dimana values nya dapat berupa (top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x%, y%, x-pos, dan y-pos). untuk lebih jelasnya perhatikan contoh berikut :File index.html
<!Doctype html>
<html>
<head>
<title> Belajar CSS </title>
<style type="text/css">
Body {
Background-image : url(“gambar/bg.jpg”);
Background-repeat : no-repeat;
Background-position : center center;
}
</style>
</head>
<body>
<H1> Cara memberi gambar pada background </H1>
</body>
</html>
Jika dijalankan maka akan menampilkan seperti gambar berikut :<html>
<head>
<title> Belajar CSS </title>
<style type="text/css">
Body {
Background-image : url(“gambar/bg.jpg”);
Background-repeat : no-repeat;
Background-position : center center;
}
</style>
</head>
<body>
<H1> Cara memberi gambar pada background </H1>
</body>
</html>
Mengatur attachment background gambar di CSS
Cara ini adalah dimana gambar sebagai background bisa diam jika objeck yang berada didepannya discroll kebawah atau katas. Jadi suatu halaman memiliki artikel yang sangat panjang dan untuk melihat semuanya perlu discroll kebawah.Pada kasus ini jika program CSS pada halaman tersebut memiliki properti background-attachment : fixed; maka background akan diam ketika discroll. Cara penggunaannya sebagai berikut :
<style type="text/css">
Body {
Background-image : url(“gambar/bg.jpg”);
Background-background : fixed;
}
Body {
Background-image : url(“gambar/bg.jpg”);
Background-background : fixed;
}
</style>
Mengatur ukuran background gambar di CSS
properti background adalah mengubah ukuran gambar menggunakan properti background-size. Ada dua cara untuk mengatur ukuran gambar background diantaranya :Cara pertama dengan menentukan lebar dan panjang suatu gambar dengan satuan value (px).
Cara kedua sesuai besar layar monitor atau fullscreen dengan value (cover).
Contoh
background-size : 500px 500px;
background-size : cover
background-size : cover
Menggabungkan semua properti background di CSS
Dari beberapa properti diatas ada cara singkat untuk mengatur background. Yaitu hanya menggunakan properti background saja. seperti berikut :Background : color image repeat position;
Contoh lengkapnya sbb:
<style type="text/css">
Body {
Background : lightblue url(‘image/bg.jpg’) no-repeat center center;
}
</style>
Body {
Background : lightblue url(‘image/bg.jpg’) no-repeat center center;
}
</style>
Demikianlah penjelasan tentang properti background pada bahasa pemrograman CSS. Selanjutnya kami serahkan pada teman-teman untuk mengkreasikan karya masing-masing.
Ok pada tutorial selanjutnya yaitu Part 6 kami akan membahas tentang...
0 Response to "Tutorial properti background/ mengatur background pada bahasa CSS"
Post a Comment