Belajar CSS #2 : Membuat Background Dengan CSS

Cara membuat background dengan CSS - Setelah mempelajari syntaks dasar CSS, kali ini akan membahasa bagaimana cara membuat background dengan CSS. CSS mempunyai properti yang bisa digunakan untuk membuat background pada halaman HTML.

Apabila belum belajar HTML, silahkan pelajari terlebih dahulu tentang HTML pada tutorial HTML Dasar.

Properti CSS background digunakan untuk memberikan efek background pada suatu elemen HTML.

Properti CSS yang digunakan untuk membuat efek background adalah:

  • Background Color
  • Background Image
  • Background Repeat
  • Background Position

Sekarang kita bahas satu per satu cara penggunaan properti background CSS pada halaman HTML.

Background Color

Properti yang digunakan untuk memberi warna background pada elemen HTML adalah background-color. Cara penulisan background-color dapat dibuat seperti ini:

body {
    background-color: red;
}

pemberian warna background pada CSS dapat dilakukan dengan cara mengisi nilai dari property background-color. Ada 3 cara penulisan value pada properti background-color:

  1. Menulis nama warna secara langsung seperti red, blue, atau warna lainnya
  2. Menggunakan Hex Value seperti #ff0000
  3. Menggunakan nilai RGB seperti (255,0,0)
h4 {
    background-color: #6495ed;
}

p {
    background-color: #e0ffff;
}

div {
    background-color: #b0c4de;
}

Background Image

Properti background-image digunakan untuk menampilkan gambar pada elemen HTML. Cara penulisan kode CSS untuk menampilkan gambar yang dijadikan sebagai background.

div {
    background-image: url("book.jpg");
}

Untuk pemberian value pada property background-image maka harus diisikan dengan url tempat file gambar tersebut disimpan.

Apabila letak file gambar tidak sama dengan letak file HTML, misalkan nama file gambar “book.jpg” berada pada folder images maka penulisan alamat url gambar seperti contoh dibawah ini:

div {
    background-image: url("images/book.jpg");
}

book.jpg merupakan nama gambar yang akan dijadikan sebagai background apabila file gambar berada di folder images.

Background Repeat

Properti background repeat digunakan untuk mengulang gambar yang dapat dilakukan melalui css. Repeat pada background image bisa dilakukan secara horizontal maupun vertikal.

Jika ingin melakukan repeat pada background image cukup menambahkan repeat seperti dibawah ini

body {
    background-image: url("book.png");
    background-repeat: repeat;
}

hasilnya akan menghasilkan background image yang diulang secara horizontal dan vertikal.

Apabila hanya ingin gambar diulang secara mendatar atau horizontal bisa menggunakan repeat-x

body {
    background-image: url("book.png");
    background-repeat: repeat-x;
}

Apabila hanya ingin gambar diulang secara vertikal bisa menggunakan repeat-y

body {
    background-image: url("book.png");
    background-repeat: repeat-y;
}

Selain memberikan efek repeat pada gambar background, ada juga value no-repeat untuk properti background-repeat

body {
    background-image: url("book.png");
    background-repeat: no-repeat;
}

Background Position

Posisi background bisa diatur dengan menggunakan kode css background-position. Contoh penerapannya pada kode css bisa dilihat seperti dibawah ini

body {
    background-image: url("book.png");
    background-repeat: no-repeat;
    background-position: right top;
}

Dari beberapa contoh penggunaan background diatas, contoh penggunaan efek css background juga bisa dilakukan seperti dibawah ini

body {background: #ffffff url("book.png") no-repeat right top;}

urutan nilai value dari properti background adalah:

  • background-color dengan nilai #ffffff (warna putih)
  • bakcground-image dengan nilai url(“book.png”)
  • background-repeat dengan nilai no-repeat
  • background-position dengan nilai right top

Demikianlah cara penerapan membuat background dengan kode CSS.

Semoga bermanfaat.