Home / script / Cara Membuat Background HTML

Cara Membuat Background HTML


Cara Membuat Background HTML dan CSS Artikel ini menyediakan tentang kode background HTML dan kode untuk pengaturan properti background (latar belakang) dari elemen HTML.
Contoh berikut menggunakan Cascading Style Sheets (CSS). CSS merupakan cara yang terbaik untuk menetapkan sifat latar belakang dalam HTML Anda. Ini lebih fleksibel daripada metode HTML yang usang. Menggunakan CSS, Anda dapat mengatur properti latar belakang dari setiap elemen HTML. Ditambah Anda dapat melakukan hal-hal seperti menentukan posisi gambar, apakah harus mengulang, bagaimana harus mengulangi dll.
Background Color (Warna Latar Belakang)
Anda dapat mengatur warna latar belakang dari setiap elemen HTML menggunakan properti background-color. Anda dapat memilih warna latar belakang dengan kode warna HTML.
Kode Hasil
Kode latar belakang HTML terbatas, latar belakang kode CSS jauh lebih baik!
Tips: Pilih warna background dengan kode warna HTML.
Properti background-color pada CSS adalah untuk pengaturan warna latar belakang dari elemen.
Sintaks: background-color: <value>
Kemungkinan Nilai:
  • <color>
  • transparent
  • inherit
Initial Value: Transparent
Berlaku untuk: Semua elemen
Inherited: No
Media: Visual
Contoh background-color:#FFE99D
Kode dan Hasilnya 
<style type="text/css">
.subscr {border:1px dashed #FF0000;
background-color:#FFE99D;
padding:5px 15px;}
.subscr-right {border-left:1px dashed #FF0000;
width:160px;
padding-left:20px;
margin-left:20px;
float:right;}
</style>
<div class="subscr">
<div class="subscr-right">
<p>Baik dengan HTML maupun CSS</p>
</div>
<div>
<p>Cara Membuat Background di suatu website atau blog</p>
</div>
</div>

Hasilnya
Baik dengan HTML maupun CSS
Cara Membuat Background di suatu website atau blog


Background Image (Gambar Latar Belakang)
Anda dapat mengatur gambar latar belakang menggunakan properti background-image.
Menggunakan kode di bawah ini, Anda perlu mengubah /logo.png ke lokasi gambar latar belakang Anda.
Kode Hasil
<div style=”background-image:url(/logo.png); background-repeat:repeat; width:200px; height:200px;”>
<p>Kode latar belakang HTML terbatas, latar belakang kode CSS jauh lebih baik!</p>
</div>
Kode latar belakang HTML terbatas, latar belakang kode CSS jauh lebih baik!
Properti background-image pada CSS adalah untuk pengaturan gambar latar belakang dari suatu elemen.
Syntax: background-image: <value>
Nilai:
  • <uri>
  • none
  • inherit
Initial Value: None
Berlaku untuk: Semua elemen
Inherited: No
Media: Visual
Contoh background-image:url(/smile.gif)
Kode 
<style type="text/css">
.selector {
background-image:url(/smile.gif);
background-repeat: repeat;
width: 200px;
height: 200px;
}
</style>
<div class="selector">Hasilnya.
Ini merupakan contoh penggunaan background-image
</div>
Hasilnya
Hasilnya. Ini merupakan contoh penggunaan background-image


Background Untuk Halaman Utuh
Untuk mengatur properti latar belakang (background) untuk seluruh halaman, dapat menerapkan properti untuk elemen body.
Contohnya seperti ini
<html>
<head>
<title>Judul</title>
</head>
<body style="background-color:black;">
Isi halaman
</body></html>
Tetapi jika menggunakan CSS, contoh kodenya seperti berikut.
<html>
<head>
<title>Judul</title>
<style type="text/css">
body { background-color:black; }
</style>
</head>
<body>
Isi halaman
</body></html>
Maka suatu halaman yang menggunakan salah satu kode di atas baik yang menggunakan metode HTML maupun CSS akan memiliki warna latar belakang hitam.

Cara Membuat Background HTML Rating: 4.5 Diposkan Oleh: as