Cara Membuat Background pada CSS (2022)

Pada tutorial kali ini kita akan membahas mengenai cara membuat background pada CSS. Sebelumnya kita telah membahas mengenai penggunaan kode warna pada CSS. Hal ini tentu sangat berkaitan untuk mendesain halaman website yang lebih interaktif.

Apa itu Background…?

Oke, background itu kalo diterjemahkan jadi “latar belakang”. Mungkin maksudnya background adalah gambar/warna dibelakang tulisan. Hehe… Menggunakan background tentu akan mempercantik tulisan dan menambah kesan dari suatu situs web.

Apa Saja Jenis Background pada CSS…?

Pada CSS (cascading style sheet) Anda bisa mengatur latar belakang tampilan dengan warna, gambar, dan masih banyak lagi sesuai keinginan. Berikut ini jenis properti background CSS:

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

Berikut ini penjelasan lebih mendetail.

1. Background Color

Anda bisa menggunakan properti background-color dari sebuah elemen untuk memberikan warna pada background.

Untuk pendefinisian warna background dapat menggunakan:
– nama warna seperti “blue”.
– nilai Heksadesimal seperti “#fffff4”.
– nilai RGB seperti “rgb(255,0,0)”.

Contoh Cara Deklarasi Background-Color

body {
   background-color: blue;
}

Contoh Kode:

<!DOCTYPE html>
<html>
    <head>
	<style>
		h1 {
		background-color: green;
		}
		p {
		background-color: #e0ffff;
		}
		div {
		background-color: rgb(255,0,255);
		}
	</style>
	</head>
	<body>
	     <h1>Halaman Web CSS</h1>
	     <p>Haloo... </p>
	     <div>Selamat Belajar CSS</div>
	</body>
</html>

Output Kode:

2. Background Image

Anda bisa menggunakan file gambar sebagai latar belakang pembuatan halaman website. Secara default, gambar akan ditampilkan secara berulang terus menerus pada elemen.

Contoh Pendeklarasian Background Image

body {
   background-image: url("nama_gambar.png")
}

Tips: ketika menggunakan background gambar usahakan agar gambar tidak kontras dengan warna teks. Jangan gunakan misalnya Gambar(warna hitam) dan Teks (warna gelap), yang baik misalnya gambar (warna terang) dan warna teks gelap.

Untuk background image (gambar), untuk mencobanya anda bisa menyiapkan gambar dalam format (*.jpg, *.png, dll). File gambar ini diletakan pada direktori sama dengan file HTML.

Nama File Contoh : “gambar.png” sumber : lh3.ggpht.com

Contoh Kode:

<!DOCTYPE html>
<html>
    <head>
     <style>
     body {
         background: url("gambar.png");
     }
     </style>
    </head>
   <body>
      <h1>Belajar CSS</h1>
   </body>
</html>

Output Kode:

cara membuat background

3. Background Image Repeat – Pengulangan Gambar Horizontal atau Vertikal

Secara default, properti background-image akan mengulangi gambar baik secara horizontal dan secara vertikal. Gambar seharusnya diulang hanya secara horizontal atau vertikal, atau akan terlihat menjadi aneh ketika cara membuat background.

Cara Mengulang Gambar Horizontal
Untuk pengulangan gambar hanya secara horizontal anda bisa menambahkan kode (background-repeat: repeat-x;). Maka background akan menjadi lebih baik.

Contoh Kode:

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

Cara Mengulang Gambar Vertikal
Untuk pengulangan gambar hanya secara vertikal anda bisa menambahkan kode (background-repeat: repeat-y;).

Contoh Kode:

body {
    background-image: url("gambar.png");
    background-repeat: repeat-y; /* repeat vertikal */
}

Anda bisa juga untuk mencegah perulangan background sehingga hanya ditampilkan satu kali saja. Untuk menampilkan sekali bisa menggunakan perintah properti background-repeat diisi dengan value no-repeat.

Contoh Kode:

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

Contoh tersebut akan menghasilkan gambar background sama letaknya dengan teks.

4. Posisi Background pada CSS

Anda bisa mengatur dimana posisi dari background yang akan ditampilkan. Baik berada di atas, bawah, kanan dan kiri browser.

– Mengatur Posisi dan Letak Gambar
Ketika teks satu tempat dengan teks tentu akan mengganggu pembaca. Oleh karena itu posisi gambar harus diatur, dapat menggunakan properti background-position.

Contoh Kode:

body {
   background-image: url("gambar.png");
   background-repeat: no-repeat; /*no ulang */
   background-position: right top;
   /*posisi gambar di atas dan kanan */
}

– Mengatur Posisi yang tetap (FIXED Position)
Kadangkala ketika kita melakukan scroll terhadap gambar maka posisinya akan berubah. Namun kita menginginkan agar gambar tersebut pada posisi yang tetap ketika di scroll. Kita bisa menggunakan properti background-attachment.

Contoh Kode:

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

Bagaimana Cara Menyingkat Kode Background…?

Menggunakan properti shorthand, anda bisa menulis kode lebih singkat dan pendek. Kode deklarasi background tersebut ditulis dalam satu garis properti sehingga efisiensi waktu.

Properti shorthand untuk background dapat menggunakan kata “background:”.

Contoh Kode:

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

Ketika menggunakan properti shorthand juga memiliki urutan prioritas yakni:
– background-color
– background-image
– background-repeat
– background-attachment
– background-position

Tidak akan menjadi masalah jika salah satu dari nilai properti tersebut tidak ditemukan. Sementara masih ada satu dari urutan diatas.

Apa Perbedaan dari Properti ini…?
background –> digunakan untuk mengatur semua deklarasi properti background
background-color –> untuk mengatur warna background dari elemen
background-position –> untuk mengatur posisi dari gambar background
background-repeat –> untuk mengatur bagaimana mengulangi gambar dari background
background-attachment –> mengatur gambar background akan menjadi tetap (fix) atau discroll akan berubah

Demikian tutorial belajar CSS mengenai cara membuat background pada CSS. Selanjutnya kita akan membahas mengenai border untuk mendesain tata letak web. Semoga bermanfaat dan terima kasih.