CSS Background

Dalam CSS (Cascading Style Sheets), properti background digunakan untuk mengatur tampilan latar belakang (background) suatu elemen HTML. Properti ini sangat fleksibel dan memungkinkan Anda untuk mengatur berbagai aspek latar belakang, termasuk:

• Warna Latar Belakang (Background Color): Anda dapat menggunakan properti background-color atau background untuk mengatur warna latar belakang elemen. Misalnya, background-color: blue; akan membuat latar belakang elemen menjadi biru.
• Gambar Latar Belakang (Background Image): Anda dapat menggunakan properti background-image atau background untuk mengatur gambar sebagai latar belakang elemen. Misalnya, background-image: url("gambar.jpg"); akan menampilkan gambar "gambar.jpg" sebagai latar belakang.
• Pengulangan Latar Belakang (Background Repeat): Anda dapat mengontrol bagaimana gambar latar belakang diulang menggunakan properti background-repeat. Nilai-nilai yang umum digunakan termasuk repeat (ulang secara horizontal dan vertikal), repeat-x (ulang secara horizontal), repeat-y (ulang secara vertikal), dan no-repeat (tidak diulang).
• Posisi Latar Belakang (Background Position): Anda dapat mengatur posisi gambar latar belakang menggunakan properti background-position. Nilai-nilai yang umum digunakan termasuk top, bottom, left, right, dan center.
• Ukuran Latar Belakang (Background Size): Anda dapat mengatur ukuran gambar latar belakang menggunakan properti background-size. Nilai-nilai yang umum digunakan termasuk cover (memperbesar gambar agar menutupi seluruh elemen, meskipun proporsinya berubah), contain (memperbesar gambar agar sesuai dengan elemen tanpa mengubah proporsinya), dan nilai-nilai spesifik dalam piksel atau persentase.
• Attachment Latar Belakang (Background Attachment): Anda dapat mengontrol apakah gambar latar belakang tetap diam atau bergerak bersama dengan konten halaman saat pengguna menggulir menggunakan properti background-attachment. Nilai-nilai yang umum digunakan termasuk scroll (bergerak bersama konten) dan fixed (tetap diam).
• Asal Kliping Latar Belakang (Background Clip): Anda dapat menentukan area elemen mana yang akan diisi oleh latar belakang menggunakan properti background-clip. Nilai-nilai yang umum digunakan termasuk border-box (mengisi seluruh elemen, termasuk border), padding-box (mengisi elemen di dalam padding), dan content-box (mengisi elemen di dalam konten).
• Asal Gambar Latar Belakang (Background Origin): Anda dapat menentukan posisi awal gambar latar belakang relatif terhadap elemen menggunakan properti background-origin. Nilai-nilai yang umum digunakan termasuk border-box, padding-box, dan content-box.

Contoh Penggunaan

CSS

body {

    background-color: lightblue; /* Mengatur warna latar belakang body menjadi biru muda */

}

 

.container {

    background-image: url("background.jpg"); /* Mengatur gambar latar belakang */

    background-repeat: no-repeat; /* Tidak mengulang gambar */

    background-position: center; /* Memposisikan gambar di tengah */

    background-size: cover; /* Memperbesar gambar agar menutupi seluruh elemen */

}

Dengan properti background dan turunannya, Anda dapat menciptakan tampilan latar belakang yang menarik dan sesuai dengan desain website Anda.

1. background-color

Memungkinkan Anda memberikan warna pada background

Property	Keterangan
transparent	Mengosongkan warna background atau membuat elemen menjadi transparan dengan elemen dibawahnya.
#FF3366	Memberi warna pada background, code #FF3366 adalah code warna hex dari warna merah, Anda bisa mengubah dengan code warna rgb atau nama warna misalnya: red (merah), black (hitam), dan sebagainya.

Contoh :
#kotak
{
background-color:#FF3366;
}

Menjadi

ELEMEN KOTAK

2. background-image

Memungkinkan Anda menambahkan gambar pada background

Property	Keterangan
url(URL_GAMBAR)	memberi gambar pada background elemen, code URL_GAMBAR bisa Anda ganti dengan url server gambar Anda.
none	Mengosongkan background gambar pada elemen.

Contoh:

#elemen-gambar
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg)
}

Menjadi :

ELEMEN GAMBAR

3. background-attachment

Memungkinkan Anda mengatur background gambar dengan pergeseran scroll bar

Property	Keterangan
scroll	Memungkinkan elemen background mengikuti penggeseran scroll bar.
fixed	Memungkinkan elemen background tidak mengikuti pergeseran dari scroll bar.

Contoh

#elemen-attachment
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-attachment:fixed
}

Menjadi

BACKGROUND FIXED

GESER SCROLL

BACKGROUND FIXES

GESER SCROLL

4. background-repeat

Memungkinkan Anda mengatur pengulangan background gambar

Property	Keterangan
repeat	Membuat elemen gambar background menjadi berulang-ulang
no-repeat	tidak ada pengulangan
repeat-y	pengulangan vertikal
repeat-x	pengulangan horizontal

Contoh :

#elemen-ulang
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-repeat:repeat-y;
}

Menjadi :

PENGULANGAN BACKGROUND SECARA VERTIKAL


PENGULANGAN BACKGROUND SECARA VERTIKAL


PENGULANGAN BACKGROUND SECARA VERTIKAL

PENGULANGAN BACKGROUND SECARA VERTIKAL

5. background-position

Memungkinkan Anda mengatur posisi background gambar Anda.

Property	Keterangan
top left	Penempatan posisi background gambar, top left adalah posisi background berada kiri atas, Anda bisa mengganti posisi menjadi : top center top right center left center center center right bottom left bottom center bottom right
x% y%	mengatur posisi background secara sumbu horizontal dan vertikal, misalnya 5% 30% adalah penempatan gambar horisontal 5% dan vertikal 30%. Atau bisa menggunakan pixel, 20px 30px artinya posisi horizontal berada pada 2o pixel dan vertikal 30 pixel.

Contoh:

#elemen-posisi
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-position:top left;
background-repeat:no-repeat;
height:200px
}

Menjadi :

ELEMEN BACKGROUND

PENGULANGAN

ATAS KIRI

Dari semua perincian diatas Anda dapat menggunakan satu perincian property background saja. misalnya :

#kotak
{
background:#FFFFFF url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg) no-repeat top left fixed
}

Nah sedikit tutorial dari Saya semoga dapat membantu Anda. Sekian semoga bermanfaat.