apa itu background di css?
dalam tulisan kali ini akan membahas tentang apa itu background di css, apa fungsi background di css dan bagaimana kita menerapkan pemakaian bcakground dalam css. namun sebelum memulainya saya mohon izin terlebih dahulu untuk mengucapkan
Salam sobat semua
Alhamdulillahi Robbil 'Alamiin atas segala nikmat yang telah Allah berikan kepada diri ini sehingga diri ini masih di beri kesempatan
untuk menulis dan berbagi lagi di tulisan ini.
Dan tak lupa sholawat serta salam saya panjatkan ke haribaan baginda sayyidina Muhammad ibni Abdillah S.A.W. beserta kepada para keluarga,
dan kepada para sahabatnya.
Bismillah untuk kali ini mari kita akan mencoba properti yang bernama background. yang mana untuk kalian yang sudah paham dengan bahasa inggris
maka tidak akan asing dengan arti kata background, yaitu latar belakang. jadi kali ini kita akan mencoba apa itu latar belakang.
sekarang mari kita langsung saja mencobanya biar menghemat waktu dan tulisan hehehehe.
buka notepad++ kalian atau buka filecss_5.html kemaren yang sudah kita buat dan file style.css nya.
1. kemudian setelah kalian buka buat yang pakai filecss_5.html maka di file style.css nya tinggal tambahin kode di bawah yang belum ada untuk 1.
yang baru buat silahkan ketik atau copy paste kode berikut pada file css
#main{border:7px solid blue;min-width:550px;width:100%;background-color:#edfa1d;}
untuk file htmlnya seperti berikut
<html>
<head>
<title>My Web</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<p>Ini adala isi dari main content yang akan saya buat
sebagai website pertama saya
</p>
<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat
website prtama saya
</p>
</div>
</body>
</html>
dan dari kode diatas maka akan diperoleh hasil seperti berikut
dari hasil diatas maka sekarang kita bisa menerka-nerka apa itu background atau latar belakang karena kita bisa lihat warna kuning pada latar belakang
selector main. itulah namanya latar belakang.
2. kemudian setelah kita kasih warna maka kita sekarang mencoba memberi nya gambar, sebelum memberinya gambar kita pilih dulu nih gambar yang mau
dipakai. kemudian pindah ke dalam satu folder dimana file html kita berada. dan biar rapi kita buat folder gambar seperti pada contoh Mengenal Tag
Image pada HTML. dan sebelum menulis pemanggilan gambar pada background kita harus lihat dulu file css kita berada di dalam folder lagi pada folder
file HTML kita atau sudah berada bersama file html kita. jika masih berada dalam folder lagi biar rapi maka pemanggilannya di tambahi
"../nama_folder/namagambar.jpg" seperti pada kode sperti berikut ini
#main{
border:7px solid blue;
min-width:550px;
width:100%;
background-color:#edfa1d;
background-image:url("../gambar/back1.jpg");
}
jika langkah kita sudah benar dan tepat maka akan diperoleh hasil seperti berikut
#main{border:7px solid blue;min-width:550px;width:100%;height:550px;background-color:#edfa1d;background-image:url("../gambar/back1.jpg");}
dan dari kode diatas maka akan menghasilkan seperti berikut
3. hasil diatas gambarnya berulang-ulang, sekarang kita coba untuk membuat perulangannya hanya secara mendatar atau secara horizontal. maka ketik
atau copy paste kode berikut
#main{border:7px solid blue;min-width:550px;width:100%;height:550px;background-color:#edfa1d;background-image:url("../gambar/back1.jpg");background-repeat:repeat-x;}
sehingga akan diperoleh hasil seperti berikut
4. dan sekarang kita coba untuk membuat berulang-ulangnya hanya secara ke atas ke bawah atau vertical. maka ketik atau copy paste kode berikut
#main{border:7px solid blue;min-width:550px;width:100%;height:550px;background-color:#edfa1d;background-image:url("../gambar/back1.jpg");background-repeat:repeat-y;}
sehingga akan diperoleh hasil seperti berikut
5. dan sekarang kita coba stop atau berhentikan berulang-ulang gambarnya biar terlihat bagus, maka kita sekarang ketik atau copy paste kode berikut
#main{
border:7px solid blue;
min-width:550px;
width:100%;
height:550px;
background-color:#edfa1d;
background-image:url("../gambar/back1.jpg");
background-repeat:no-repeat;
}
dan dari kode diatas maka akan mendapatkan hasil seperti berikut
6. untuk posisi gambar kita bisa pindah-pindah dengan menggunakan properti background-position dan untuk valuenya center(tengah), left(kiri), right
(kanan). langsung saja kita mencoba biar lebih paham. ketik atau copy paste kode berikut
#main{border:7px solid blue;min-width:550px;width:100%;height:550px;background-color:#edfa1d;background-image:url("../gambar/back1.jpg");background-repeat:no-repeat;background-position:center;}
kode diatas saya buat posisi gambar pada posisi tengah dan hasilnya seperti berikut dan jika kalian ingin merubah posisi tinggal ubah value center
dengan yang lain. seperti pada contoh video diatas kawan.
7. dan yang lain lagi ada properti background-size dan saya sangat jarang memakai nya karena takut ada beberapa browser yang tidak support dengan properti css background-size, karena saya sering mengubah ukuran size gambar dengan photoshop, jadi ukuran gambar nya yang saya rubah, tapi kita coba dulu kawan.
#main{border:7px solid blue;min-width:550px;width:100%;height:550px;background-color:#edfa1d;background-image:url("../gambar/back1.jpg");background-repeat:no-repeat;background-position:center;background-size:100% 450px;}
untuk value 100% itu untuk width nya kalian bisa ubah pada ukuran nilai px atau em dan yang 450px itu untuk ukuran nilai tingginya, sehingga akan
diperoleh sperti berikut
8. dan penulisan properti background bisa kita ringkas seperti ini
background:color url-image repeat position;
dan sekarang kita coba kawan seperti kode berikut
#main{
border:7px solid blue;
min-width:550px;
width:100%;
height:550px;
background:#edfa1d url("../gambar/back1.jpg") no-repeat center;
background-size:100% 450px;
}
dan jika kita benar dan tepat maka akan mendapatkan hasil sama seperti gambar diatas pada hasil kode nomer 7.
Dan untuk properti background hanya ini yang sering saya pakai dan yang saya tahu, untuk yang lainnya bisa kalian coba coba sendiri di rumah
dan untuk tulisan kali ini cukup sekian dulu, dan mohon maaf apabila ada kesalahan dalam penulisan kawan. sampai di next tulisan lagi
Salam sobat semua
#css #background #property #html #free #share #web #website #websites #gratis #berbagi
Komentar
Posting Komentar