Background HTML

Kalau sebelumnya kita menggunakan atribut background dan bgcolor dalam pelajaran HTML tentang Background HTML, sekarang kita akan belajar membuat latar belakang atau background tersebut dengan menggunakan atribut style.

Untuk membuat background dengan warna di gunakan properti background-color.

Membuat background di halaman website dengan warna:

<body style="background-color:yellow">...</body>

Contoh di dalam dokumen HTML:

<html>
<head></head>
<body style="background-color:yellow">
<h1>Contoh membuat background warna dengan atribut style background-color.</h1>
</body></html>

Hasil: lihat Preview

Contoh background di dalam tag HTML:

<p style="background-color:aqua">Paragraf dengan background aqua</p>

Hasil:

Paragraf dengan background aqua

Untuk nilai dari properti background-color tersebut kita bisa menggunakan kode RGB, Hexadecimal maupun Nama Warna.

<p style="background-color:rgb(127,255,212)">Warna background menggunakan kode RGB</p>
<p style="background-color:#7fffd4">Warna background menggunakan kode Hexadecimal</p>
<p style="background-color:aquamarine">Warna background menggunakan Nama Warna</p>

Hasil dari ketiga kode HTML diatas akan sama:

Warna background menggunakan kode RGB

Warna background menggunakan kode Hexadecimal

Warna background menggunakan Nama Warna

Klik link berikut untuk melihat kode hexadecimal dan nama warna, untuk RGB dapat menggunakan tool kode warna RGB.

Untuk membuat background dengan gambar di gunakan properti background-image.

Membuat background dengan gambar di dokumen HTML:

<body style="background-image:url(lokasi dan nama gambar)">...</body>

background

Sebagai contoh kita akan menggunakan gambar di samping (background.jpg) untuk membuat background di dokumen HTML, ukuran gambar tersebut adalah 100px X 100px :

<html>
<head></head>
<body style="background-image:url(background.jpg)">
<h1>Contoh membuat background gambar dengan atribut style background-image.</h1>
</body></html>

Hasil: lihat Preview

Maka secara otomatis browser akan mengisi penuh halaman website dengan gambar tersebut secara berulang (repeat) baik secara vertikal maupun horizontal.

Dengan adanya pengulangan ini maka dengan gambar ukuran 1 x 2px, hanya 2 titik (pixel) yaitu putih dan abu-abu kita dapat membuat background seperti berikut.

Hasil: Lihat Preview

Untuk pengaturan pengulangan tersebut dapat menggunakan properti background-repeat dengan nilai atau value: no-repeat, repeat, repeat-x dan repeat-y.

Contoh jika kita ingin membuat pengulangan secara horizontal maka kita dapat menambah kode repeat-x ke dalam contoh diatas:

<body style="background-image:url(background.jpg);background-repeat:repeat-x;">...<body>

Hasil: lihat Preview

Sedangkan untuk pengulangan secara vertikal kita tambahkan kode repeat-y:

<body style="background-image:url(background.jpg);background-repeat:repeat-y;">...<body>

Hasil: lihat Preview

Anda bisa melakukan latihan selanjutnya dengan mengganti gambar dan nilainya.

Untuk memposisikan background digunakan properti background-position dengan value top=atas, right=kanan, bottom=bawah left=kiri dan center=tengah atau dengan nilai x dan y.

Sebagai contoh kita akan menggunakan gambar berikut yang berukuran 800px X 1px dengan nama bg-example.png.

bg-example

Kita akan membuat agar gambar tersebut berada tepat ditengah dokumen dengan pengulangan (repeated) secara vertikal.

<body style="background-color:#000;background-image:url(bg-example.png);background-repeat:repeat-y;background-position:center;">

Hasil: lihat Preview


» Tutorial selanjutnya:

« Tutorial sebelumnya:

Posted in HTML Tutorial by Masim man

Post a comment

19 Responses to “Background HTML”

  1. ir said:

    Thx gan… mga ilmuny slalu ditambah oleh Tuhan

  2. lathifah said:

    kalo ngambil gambarnya dari komputer nulisnya gimana ya? terimakasih

    • Masim man said:

      Klo mau online gambarnya harus diupload dulu, baru kemudian masukkan alamat urlnya ke dalam style.
      background:url(alamat url)
      Cth: background:url(http://htmlcssguides.com/images/bg01.jpg)

  3. payzo said:

    thank’s bro sudah share nih…

  4. .. kalo pengen sehalaman di ulang^ dengan gambar yg sama gimana?!? ..

    • Masim man said:

      Secara default nilai atau value dari properti background-repeat untuk background-image adalah repeat (gabungan pengulangan gambar secara horisontal maupun vertikal) artinya tanpa memasukan properti tersebut maka gambar yang kita gunakan sebagai background akan otomatis diulang secara vertikal maupun horisontal.

  5. jily said:

    tanks gan..

  6. yusuf said:

    thx membantu sekali mas

  7. rhamli said:

    thank’z full infonya 🙂
    :100x like:

  8. Terimakasih banyak infonya ya

  9. danu said:

    terimakasih, sedikit sulit

  10. Faizal said:

    itu nama Folder di pake atau nama Gambarnya ,, trus maksud dari Cooding URL itu apa ?

    • Masim man said:

      Sorry bro Faizal, saya kurang paham dengan pertanyaannya, klo gambarnya berada di folder ya harus di tulis nama folder diikuti dengan nama gambarnya.

  11. KangRoyy said:

    Sangat bermanfaat bos

  12. icha said:

    pemahaman html memang perlu kita untuk edit blog dan website

  13. wah mantap gan

  14. 4shura said:

    mas mau nanya dong ?
    misal 1 gambar full di web tp pas di scrool ke bawah si gambar gak ikut turun cuman table nya doang yg turun caranya gimana ?

Back to top