Kursus Membuat Web

iklan

Background CSS

Property Background

Property background digunakan untuk memberikan background pada tag atau elemen HTML. Beberapa property background :

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

background-color

Property background-color digunakan untuk menentukan warna background dari tag atau elemen HTML.

Memberikan warna background untuk satu halaman, digunakan tag atau elemen <body></body> sebagai selector.

 body {
    background-color: #b0c4de;
}

Lihat ...

Dengan CSS, penentuan warna yang paling sering :

  • Menggunakan Nilai HEX seperti : "#ff0000"
  • Menggunakan Nilai RGB seperti : "rgb(255,0,0)"
  • Menggunakan Nama Warna seperti : "red"

Lihat daftar lengkap nilai warna.

Pada contoh dibawah ini tag atau elemen h1, p dan div memiliki warna background yang saling berbeda.

h1 {
    background-color: #6495ed;
}
p {
    background-color: #e0ffff;
}
div {
    background-color: #b0c4de;
}
Lihat ...

background-image

Property background-image digunakan untuk menentukan background dengan menggunakan image (gambar).

Secara default background image diulang sehingga meliputi seluruh elemen.

Background image halaman dapat diatur seperti ini :

body {
    background-image: url(../image/paper.gif);
}
Lihat ...

Di bawah ini adalah contoh dari kombinasi buruk antara teks dan background image. Teks hampir tidak terbaca :

body {
    background-image: url(../image/bgdesert.jpg);
}
Lihat ...

Background Image - Pengulangan Horizontal Atau Vertikal

Secara default, property background-image mengulangi gambar secara horizontal dan vertikal. Terkadang dibutuhkan beberapa image yang harus diulang hanya secara horizontal saja atau sebaliknya vertikal saja karena jika diulang secara horizontal dan vertikal maka background akan terlihat aneh, seperti ini :

body {
    background-image: url(../image/gradient.png);
}
Lihat ...

Jika image hanya diulang secara horizontal saja (repeat-x), maka background akan terlihat lebih baik :

body {
    background-image: url(../image/gradient.png);
    background-repeat: repeat-x;
}
Lihat ...

Background Image - Mengatur posisi dan no-repeat

Catatan : Bila menggunakan background image, gunakan image yang tidak mengganggu teks.

Agar background image tidak diulang-ulang digunakan property background-repeat dengan nilai no-repeat.

body {
    background-image: url(../image/img_tree.png);
    background-repeat: no-repeat;
}
Lihat ...

Pada contoh di atas, background image ditampilkan di tempat yang sama dengan teks. Jika Anda ingin mengubah posisi image, sehingga tidak mengganggu teks, maka gunakan property background-position :

body {
    background-image: url(../image/img_tree.png);
    background-repeat: no-repeat;
    background-position: right top;
}
Lihat ...

Menyingkat Penulisan Sintak Property Background

Seperti yang dapat Anda lihat dari contoh di atas, ada banyak property yang harus digunakan ketika kita ingin membuat background.

Untuk mempersingkat sintak, semua property dapat ditulis dalam satu property. Ini disebut penyingkatan property.

Property singkat untuk background adalah "background" :

body {
    background: #ffffff url(../image/img_tree.png) no-repeat right top;
}
Lihat ...

Bila menggunakan property singkat, urutan nilai property adalah :

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

Tidak masalah jika salah satu dari property tidak kita gunakan, asal urutannya benar.

body {
	margin-left: 200px;
	background: #5d9ab2 url(../image/img_tree.png) no-repeat top left;
}

.center_div {
	border: 1px solid gray;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	background-color: #d0f0f6;
	text-align: left;
	padding: 8px;
}

Berikut ini contoh lain untuk penggunaan property background

body {
	background-image: url(../image/img_tree.png);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

Contoh ini menunjukkan bagaimana untuk mengatur background image yang tetap. Image tidak akan bergulir pada bagian halaman meskipun di scroll.

Semua Property Background

Property Keterangan
background Mengatur semua property background dalam satu deklarasi
background-color Mengatur warna background
background-image Mengatur background berimage
background-repeat Mengatur pengulangan background image
background-attachment Menentukan apakah background image tetap atau mengikuti scroll
background-position Mengatur posisi background berimage

Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015