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

Install Perl

  Salam Sobat Semua ALhamdulillah Sholawat serta salam tetap tercurah kepada sang panutan sayyidina Muhammad S.A.W. untuk kesempatan kali ini saya ingin berbagi tentang Applikasi perl dan Instalasi nya. mungkin kebanyakan orang applikasi perl ini tidak begitu penting apalagi di kalangan designer. tapi lain kata dengan kalangan yang suka melakukan aktifitas hacking,cracking,carding dan programming. mereka akan sangat membutuhkan applikasi ini karena memang ada beberapa tool atau alat yang terbuat dari bahasa perl. dan Insya Allah nanti saya akan berbagi juga dasar dasar perl oke :D heheheh. ok langsung saja.  - Download applikasi instalasi perl di https://adsafelink.com/4vKs7DHTY7 - ekstrak dari winrar nya 1. klik dua kali applikasi instalasi perl yang sudah di download dan setalah muncul jendela seperti di gambar maka klik next 2. Pilih option i accept dan kemudian klik next seperti tampak pada gambar 3. di bagian jendela ini untuk settingannya kita pakai yang standard saja ti...
Posting Komentar
Baca selengkapnya

Belajar HTML bersama part 2(mengenai Tag Heading)

  Alhamdulillah segala puji bagi Rabb semesta alam yang masih di beri kesempatan bisa bertemu lagi di tulisan atau video ini. pada kesempatan kemaren kita sudah mencoba membuat file html. dan sekarang ayo kita mencoba yang lebih dalam mengenai HTML. di dalam file kemaren atau bacaan atau video kemaren ada beberapa isi body yang kita tahu. yaitu <h1> dan <p>. untuk kesempatan kali ini saya mencoba memberitahukan arti h1 itu dulu, dan next bacaan atau video kita lanjutkan yang lain. untuk h1 kalau dalam teori disebut heading yang fungsinya membuat tulisan di dalam body itu berukuran menurut ukuran sesuai sistem. h1 ini terdiri sampai h6. jadi kita nanti kita akan coba h1 sampai h6. sekarang kita coba buka notepad lagi dan tulis atau copy paste tulisan berikut <html> <head> <title>Website Pertama</title> </head> <body> </body> </html> kemudian diantara tag body kita tulis atau copy paste tag h1 kemudian di sav...
Posting Komentar
Baca selengkapnya