Tutorial CSS - Pembuatan Background

Tutorial CSS - Pembuatan Background

Setelah mempelajari tentang properti color dan nilai-nilai warna yang valid di CSS, langkah berikutnya adalah memahami penggunaan properti background. Properti background memiliki peran penting dalam memberikan latar belakang pada elemen-elemen tertentu dalam sebuah halaman web. Ketika kita mengetik "background" pada kode CSS di Inspect Element, akan muncul berbagai saran properti yang berkaitan dengan background, masing-masing dengan fungsinya yang spesifik. Ada dua cara utama untuk memberikan background di CSS, yaitu dengan warna dan gambar. Penggunaan gambar sebagai background memerlukan beberapa properti tambahan untuk mengatur tampilannya. Oleh karena itu, terdapat banyak properti background-* dalam CSS yang dapat kita gunakan. Pada tutorial ini, kita akan membahas berbagai properti penting dan sering digunakan dalam pembuatan background. Mari kita mulai pembahasannya.

Dasar-Dasar Background di CSS

Properti background dalam CSS digunakan untuk menetapkan latar belakang pada elemen-elemen web. Latar belakang ini dapat berupa warna solid, gambar, atau bahkan kombinasi keduanya. Properti background sangat serbaguna dan penting karena memungkinkan desainer untuk memperkaya tampilan visual halaman web, meningkatkan estetika, dan memperkuat identitas merek.

 

Penjelasan Singkat tentang Properti Background

Properti background terdiri dari beberapa sub-properti yang mengontrol berbagai aspek dari latar belakang elemen, seperti warna, gambar, posisi, pengulangan, ukuran, dan attachment. Berikut adalah beberapa sub-properti dasar yang sering digunakan:

• `background-color`: Menentukan warna latar belakang.
• `background-image`: Menentukan gambar yang digunakan sebagai latar belakang.
• `background-repeat`: Mengontrol apakah dan bagaimana gambar latar belakang diulang.
• `background-position`: Menentukan posisi awal gambar latar belakang.
• `background-size`: Mengontrol ukuran gambar latar belakang.
• `background-attachment`: Mengatur apakah latar belakang bergulir bersama konten atau tetap di tempat.

Sub-properti ini dapat digunakan secara individu atau digabungkan menggunakan shorthand property `background` untuk menetapkan beberapa nilai sekaligus.

 

Mengapa Properti Background Penting dalam Desain Web

Properti background memegang peranan penting dalam desain web karena beberapa alasan utama:

1. Meningkatkan Estetika: Latar belakang yang tepat dapat memperindah tampilan halaman web, membuatnya lebih menarik dan menyenangkan untuk dilihat.
2. Menekankan Konten: Penggunaan latar belakang yang sesuai dapat membantu menekankan elemen-elemen penting pada halaman, seperti tombol, header, dan blok konten.
3. Menciptakan Hierarki Visual: Dengan variasi warna dan gambar, desainer dapat menciptakan hierarki visual yang memandu perhatian pengguna melalui berbagai bagian halaman web.
4. Mendukung Branding: Latar belakang yang konsisten dengan warna dan gaya brand membantu memperkuat identitas visual perusahaan atau produk, menciptakan pengalaman yang kohesif bagi pengguna.
5. Menyediakan Konteks Visual: Gambar latar belakang bisa memberikan konteks atau suasana yang relevan dengan konten yang disajikan, meningkatkan keterlibatan pengguna.

Dengan memahami dan menguasai penggunaan properti background di CSS, desainer web dapat menciptakan halaman yang tidak hanya fungsional tetapi juga estetis, memikat, dan efektif dalam menyampaikan pesan atau informasi kepada pengguna. Properti background menjadi alat penting dalam kotak alat seorang desainer web, memungkinkan kreativitas dan fleksibilitas dalam merancang tampilan situs web yang menonjol.

 

Baca Juga

• CSS Cara Mewarnai Teks
• CSS Cara Penulisan

 

Properti Background Dasar

background-color

Properti `background-color` digunakan untuk menetapkan warna latar belakang pada elemen HTML. Anda dapat menggunakan berbagai format warna seperti nama warna (misalnya, `red`), kode heksadesimal (misalnya, `#ff0000`), RGB (misalnya, `rgb(255, 0, 0)`), atau HSL (misalnya, `hsl(0, 100%, 50%)`). Ini adalah salah satu properti paling sederhana dan paling sering digunakan dalam CSS.

 

Cara Menetapkan Warna Latar Belakang

Untuk menetapkan warna latar belakang pada elemen tertentu, Anda cukup menggunakan properti `background-color` di dalam deklarasi CSS elemen tersebut.

Contoh Penggunaan Kode

 

```css
/* Mengatur warna latar belakang elemen body */
body {
    background-color: lightblue;
}


/* Mengatur warna latar belakang elemen div */
div {
    background-color: #ffcc00;
}


/* Mengatur warna latar belakang elemen paragraf menggunakan RGB */
p {
    background-color: rgb(255, 99, 71);
}
```

 

Dalam contoh di atas, `body` memiliki latar belakang berwarna biru muda, `div` memiliki latar belakang berwarna kuning cerah, dan `p` (paragraf) memiliki latar belakang berwarna merah tomat.

 

background-image

Properti `background-image` digunakan untuk menambahkan gambar sebagai latar belakang pada elemen HTML. Gambar tersebut bisa berasal dari URL eksternal atau file lokal.

 

Cara Menambahkan Gambar sebagai Latar Belakang

Untuk menetapkan gambar latar belakang, Anda perlu menggunakan URL gambar yang ingin digunakan. Gambar ini dapat diulang, diposisikan, dan diatur ukurannya menggunakan properti background lainnya.

Contoh Penggunaan Kode

 

```css
/* Mengatur gambar latar belakang elemen body */
body {
    background-image: url('background.jpg');
}


/* Mengatur gambar latar belakang elemen header */
header {
    background-image: url('https://example.com/header-bg.png');
}


/* Mengatur gambar latar belakang elemen div */
div {
    background-image: url('images/pattern.png');
}
```

 

Dalam contoh di atas, `body` menggunakan gambar `background.jpg` sebagai latar belakangnya, `header` menggunakan gambar dari URL eksternal, dan `div` menggunakan gambar pola dari folder `images`.

Dengan menguasai penggunaan `background-color` dan `background-image`, Anda dapat mulai mengatur latar belakang elemen-elemen di halaman web Anda dengan lebih kreatif dan menarik. Properti ini merupakan dasar penting dalam desain web yang membantu menciptakan tampilan yang lebih hidup dan berkarakter.

 

Pengaturan Lanjutan Background

Setelah memahami dasar-dasar properti background di CSS, langkah berikutnya adalah mempelajari pengaturan lanjutan yang memungkinkan untuk mengontrol tampilan latar belakang dengan lebih detail. Berikut adalah beberapa sub-properti yang dapat digunakan untuk mencapai itu:

 

background-repeat

Properti `background-repeat` mengontrol apakah dan bagaimana gambar latar belakang diulang di dalam elemen HTML. Ada beberapa nilai yang dapat digunakan:

• `repeat`: Gambar diulang secara horizontal dan vertikal (default).
• `no-repeat`: Gambar tidak diulang sama sekali.
• `repeat-x`: Gambar diulang hanya secara horizontal.
• `repeat-y`: Gambar diulang hanya secara vertikal.

Contoh Penggunaan Kode:

 

```css
/* Gambar latar belakang diulang secara horizontal dan vertikal */
div {
    background-image: url('pattern.png');
    background-repeat: repeat;
}


/* Gambar latar belakang tidak diulang */
section {
    background-image: url('header-bg.jpg');
    background-repeat: no-repeat;
}
```

 

background-position

Properti `background-position` mengatur posisi awal gambar latar belakang di dalam elemen HTML. Nilai yang dapat digunakan termasuk `left`, `right`, `center`, `top`, dan `bottom`, serta nilai dalam persentase atau piksel untuk penyesuaian yang lebih presisi.

Contoh Penggunaan Kode:

 

```css
/* Gambar latar belakang diposisikan di tengah */
div {
    background-image: url('background.jpg');
    background-position: center;
}


/* Gambar latar belakang diposisikan di kanan atas */
header {
    background-image: url('header-bg.jpg');
    background-position: right top;
}
```

 

background-size

Properti `background-size` mengontrol ukuran gambar latar belakang di dalam elemen HTML. Nilai yang umum digunakan termasuk `auto`, `cover`, dan `contain`.

• `auto`: Ukuran gambar latar belakang diatur sesuai dengan dimensi aslinya.
• `cover`: Gambar latar belakang diperbesar atau diperkecil secara proporsional sehingga menutupi seluruh area latar belakang tanpa memunculkan bagian yang terpotong.
• `contain`: Gambar latar belakang diperbesar atau diperkecil secara proporsional sehingga seluruh gambar dapat dilihat di dalam area latar belakang.

Contoh Penggunaan Kode:

 

```css
/* Gambar latar belakang diperbesar atau diperkecil untuk menutupi seluruh area */
section {
    background-image: url('header-bg.jpg');
    background-size: cover;
}


/* Ukuran gambar latar belakang disesuaikan untuk memuat seluruh gambar */
footer {
    background-image: url('footer-bg.jpg');
    background-size: contain;
}
```

 

background-attachment

Properti `background-attachment` mengontrol apakah latar belakang akan bergulir bersama konten atau tetap di tempat ketika pengguna menggulir halaman. Nilai yang dapat digunakan termasuk `scroll`, `fixed`, dan `local`.

• `scroll`: Latar belakang akan bergulir bersama konten ketika halaman digulir (default).
• `fixed`: Latar belakang akan tetap di tempatnya ketika pengguna menggulir halaman, menciptakan efek latar belakang tetap.
• `local`: Latar belakang akan bergulir bersama elemen yang bersangkutan, tidak dengan elemen lainnya.

Contoh Penggunaan Kode:

 

```css
/* Latar belakang bergulir bersama konten */
body {
    background-image: url('background.jpg');
    background-attachment: scroll;
}


/* Latar belakang tetap di tempatnya saat pengguna menggulir halaman */
header {
    background-image: url('header-bg.jpg');
    background-attachment: fixed;
}
```

 

Dengan menguasai sub-properti lanjutan ini, Anda dapat memiliki lebih banyak kendali dalam menyesuaikan tampilan latar belakang pada halaman web Anda, menciptakan efek visual yang menarik dan sesuai dengan kebutuhan desain Anda.

 

Penggunaan Shorthand Property

Shorthand property untuk background memungkinkan kita untuk menetapkan beberapa nilai properti background sekaligus dalam satu deklarasi, membuat kode CSS menjadi lebih ringkas dan mudah dibaca.

 

Penjelasan tentang Shorthand Property untuk Background

Properti shorthand `background` menggabungkan beberapa sub-properti seperti warna latar belakang, gambar latar belakang, pengulangan, posisi, ukuran, dan attachment menjadi satu baris kode. Urutan nilai-nilai yang diberikan biasanya mengikuti pola:

`<background-color> <background-image> <background-repeat> <background-attachment> <background-position> <background-size>`.

Contoh Penggunaan Kode Shorthand Property Background

 

```css
/* Menggunakan shorthand property untuk menetapkan warna dan gambar latar belakang */
div {
    background: lightblue url('background.jpg');
}


/* Menggunakan shorthand property dengan semua sub-properti background */
section {
    background: #f0f0f0 url('header-bg.jpg') no-repeat center/cover fixed;
}
```

 

Dalam contoh di atas, shorthand property `background` digunakan untuk menetapkan warna dan gambar latar belakang pada elemen `div`, serta untuk mengatur semua sub-properti background pada elemen `section`.

 

Contoh Praktis dan Studi Kasus

Membuat Latar Belakang Berwarna Solid

 

```css
/* Membuat latar belakang berwarna solid */
body {
    background-color: #ffffff;
}
```

 

Membuat Latar Belakang dengan Gambar yang Responsif

 

```css
/* Membuat latar belakang dengan gambar yang responsif */
header {
    background-image: url('header-bg.jpg');
    background-size: cover;
    background-position: center;
}
```

 

Mengkombinasikan Berbagai Properti Background untuk Desain yang Kompleks

 

```css
/* Mengkombinasikan berbagai properti background untuk desain yang kompleks */
section {
    background: url('pattern.png') repeat-y left top,
                url('overlay.png') no-repeat center/cover;
    background-color: #ffcc00;
}
```

 

Dalam contoh-contoh di atas, kita mengaplikasikan properti background CSS untuk menciptakan berbagai jenis latar belakang, mulai dari latar belakang berwarna solid hingga latar belakang dengan gambar yang responsif, serta mengkombinasikan berbagai properti background untuk menciptakan desain yang kompleks dan menarik. Dengan menguasai penggunaan properti background, kita dapat menciptakan tampilan visual yang sesuai dengan kebutuhan dan tujuan desain halaman web kita.

Published on June 12, 2024
Last updated on June 03, 2026