hisman.org newsletter

Dapatkan tips-tips menarik tentang web design langsung ke e-mail Anda (Gratis...)

Sep
11
1

Bermain-main dikit lagi dengan background

posted by hisman in September 11th, 2008

category : CSS, background, webdesign

Tags: ,

Oke, saya sudah menjelaskan sedikit tentang background. Nah, sekarang saatnya memulai pengaplikasiannya.

Pada contoh pengaplikasian background ini kemungkinan gak akan banyak-banyak contoh. Klo kamu masih kurang, silakan explore sendiri aja ya…

Kita mulai ya…

Misal, saya punya kode HTML kayak gini:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Latihan Background</title>
</head>
<body>
<h2>Contoh Pengaplikasian Background</h2>
<div id="bg1">
</div>
<div id="bg2">
</div>
</body>
</html>

Saya akan akan mencoba menambahkan background pada tag h2 dan tag div. ini adalah kode CSSnya : Selengkapnya..

Sep
09
7

Sedikit Penjelasan Tentang Background

posted by hisman in September 9th, 2008

category : CSS, background, webdesign

Tags: ,

Yap,,kali ini saya akan bahas mengenai bagaimana menambahkan background dengan CSS. Namun, sebelumnya ini beberapa hal tentang background yang perlu kamu tau, dan mungkin kamu sudah tau hal-hal ini:

1. Background dapat berupa warna ataupun gambar, atau bahkan bisa terdiri dari dua unsur tersebut.

2. Kamu bisa ngasih background di elemen HTML manapun, kamu tinggal ubah-ubah selectornya aja.

Ada 6 property di CSS,yang bisa digunakan untuk menambahkan background pada dokumen HTML kita, yaitu background-color, background-image, background-attachment, background-position, background-repeat, dan background. Saya jelasin satu-satu ya

1. background-color

Sesuai namanya, guna dari property ini adalah memberi warna pada background. Value dari property ini ya warna-warna yang ingin diberikan pada background.

Contohnya:


body{
     background-color:#000000;
}

Kode CSS di atas akan membuat tag body memiliki background berwarna hitam (#000000 = hitam).

2. background-image

Kalo property yang ini berguna untuk membuat image/gambar menjadi background. Valuenya seperti ini

url(letak gambar).

Contohnya, saya ingin membuat gambar “bg.png” menjadi background dari tag body yang terletak di folder images (folder images dan file HTMLnya ada dalam satu folder), maka CSSnya jadi seperti ini:


body{
     background-image: url(images/bg.png);
}

Selengkapnya..

Recent Comments

  • bambang: thanks..artikelnya bermanfaat sekali buat pembelajaran saya untuk lebih mendalami web designer…
  • hisman: @fachrizal coba baca artikel saya yang ini mas : http://hisman.org/all-about-cs s-float-technique-2.html di...
  • ifliandry: Bagi bagi ilmu terus nih … tetap dalam kesederhanaan dalam penyampaian, tapi bisa langsung di coba...
  • fachrizal: gmana klo content terdiri dari 3 bagian , ada sidebar, posting ama, rightbar … thx
  • hisman: @abdi Klo yang float:right itu ntar objeknya akan mengambang ke arah kanan.. contohnya ini :...

Tags Cloud

background belajar CSS belajar HTML blog blogku jadi box model buat layout buat layout tanpa tabel color CSS desain blog sendiri desain web desain web pake flash flash float fokus gak jelas horizontal menu HTML image inline dan block element kenalan dengan CSS kenalan sama HTML kompres gambar layout menu ngedesain web peletakkan CSS saatnya fokus selector di CSS skill dasar webdesigner tabel tag div tentang background tools web webdesign whitespace
Tugas Besar Information Retrieval IT TELKOM 0910 – 2

Add to Technorati Favorites

Web Design Blogs - BlogCatalog Blog Directory

copyright © 2010 hisman.org | web design and icon by hisman