Langsung ke konten utama

belajar CSS dasar bersama part 6 : background property css

  


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


dan dari hasil diatas gambar tidak terlihat jelas karena selector main terlalu pendek untuk ukuran tingginya maka kita coba tambahin untuk ukuran
tingginya seperti pada kode 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 

 

 

 

 

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

belajar CSS dasar bersama part 3 : Cara mengetahui dan menetapkan nilai hex warna pada CSS atau HTML dengan offline beserta kelebihannya

   warna di css merupakan bagian terpenting, karena warna akan mempercantik sebuah tampilan website yang nanti akan kita buat, namun kita harus tahu bagaimana cara membuat atau memberi nilai atau value hex warna di css sehingga tampilan HTML kita akan cantik dan menarik, tapi sebelum kita memulai izinkan saya untuk mengucapkan Salam sobat semua Alhamdulillah atas segala sesuatu nikmat yang telah Allah berikan kepada diri ini, dan salah satu nya nikmat masih di beri kesempatan untuk bisa menulis dan berbagi dengan kalian. dalam kesempatan kali ini sesuai janji saya pada tulisan sebelumnya bahwa kita akan mencoba bagaimana caranya mendapat nilai hex warna pada CSS atau html secara offline. dan untuk kali ini kita akan memakai aplikasi pembantu yaitu adobe photoshop. dan ini sudah saya lakukan bertahun-tahun dalam pembuatan websites ataupun blog. bagi yang belum punya adobe photoshop di perangkatnya silahkan kalian  baca tutorial sebelumnya tentang adobe photshop disini. kal...
Posting Komentar
Baca selengkapnya

Install Notepad ++

Install Notepad ++ Salam semuanya sobat Pada kesempatan kali ini saya ingin menyimpan tata cara instal notepad ++ dan filenya. Agar tidak usah mencari di blog lain hehehehe. Fungsi notepad ++ ini sangatlah banyak dan sering saya gunakan untuk keperluan sehari-hari seperti koding php, html, perl dan lain-lain. Bagi saya tools kecil ini sangat bermanfaat. Dan siapa tahu juga bermanfaat buat kalian semua pembaca. Oke langsung saja download aplikasi notepad ++ nya disini Kemudian ekstrak filenya dan klik file exe installernya dua kali, sehingga akan tampil serperti pada gambar, dan kemudian pilih english saja dan klik ok. Kemudian klik next seperti pada gambar  Kemudian klik i agree Dan kemudian klik next saja kalo ingin letak folder installer atau pemasangannya di defaultkan oleh kita.  Kalau ingin dipindah, tinggal klik browse saja dan kemudian pilih letak foldernya  Kemudian ada beberapa pilihan atau opsi. Ikuti seperti gambar ya hehehehe: D  Dan yang terkahir seles...
Posting Komentar
Baca selengkapnya