7 Properti CSS Untuk Mengatur Background pada Elemen HTML

Untuk mengatur dan menentukan efek Backgorund pada sebuah Halaman Web, Anda bisa menggunakan 7 properti CSS yang masuk dalam kategori Background Properties. Background Properties merupakan sekumpulan properti css yang berguna untuk mengatur efek latar belakang pada suatu elemen.

Anda juga bisa mengatur posisi gambar dari background. seperti mengatur posisi peletakan gambar atau mengatur ukuran gambar. Bahkan Anda juga bisa memerintahkan sebuah gambar untuk membuat perulangan dengan menggunakan properti background-repeat. Baca ulasan lengkapnya beserta contoh penggunaannya pada Artikel ini.

Daftar isi

1. All Backgrounds Properties

Sebelum belajar menulis kode CSS untuk mengatur tampilan Latar Belakang pada suatu halaman web, berikut ini ke-7 properti css yang khusus digunakan untuk mengatur maupun menampilkan gambar pada halaman web.

Daftar Tabel untuk All Backgrounds Properties
NoPropertiDeskripsi
1background-colormemberi warna pada latar belakang
2background-imagememberi gambar pada latar belakang dari suatu element
3background-repeatmemberi perintah pada gambar yang ada di latar belakang untuk perulangan.
4background-positionmengatur posisi gambar pada latar belakang
5background-attachmentmengatur suatu gambar apakah jika mouse di scroll gambar ikut scroll atau tetap
6background-sizemenentukan ukuran gambar pada latar belakang
7backgroundmengatur latar belakang pada element secara luas

All Background Properties lebih sering digunakan untuk mengatur elemen-elemen yang ada pada html. berikut ulasan satu persatu dari ke-7 properti background.

2. Background-Color

Sesuai dengan namanya, Properti background-color pada CSS merupakan properti yang bisa Anda gunakan khusus untuk mengatur pewarnaaan dari suatu latar belakang pada selector(elemen html). Properti ini mempunyai beberapa nilai antara lain.

Daftar Tabel untuk Background-Color
NoJenis NilaiNilai
1Colorred, blue, black, olive, teal, navy, lime, dsb
2Hexadecimal#FF0000, #00FF00, #0000FF, #000000, dsb
3red-green-blue 'rgb()'rgba(255,0,0), rgba(0%,50%,100%), rgba(0,0,255), dsb
4red-green-blue-alpha 'rgba()'rgba(255,0,0,1), rgba(0%,100%,50%,1), rgba(0,0,255,0.5), dsb
5Hue-saturation-lightness 'hsl()'hsl(360,100%,50%), hsl(240,75%,50%), dsb
6Hue-saturation-lightness-alpha 'hsla()'hsla(360,100%,50%,0.1), dsb

Setelah Anda mengetahui beberapa value dasar untuk properti background-color. Selanjutnya, berikut contoh penggunaan dari properti tersebut atau copy kode HTML+CSS berikut ini :

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Contoh Penggunaan Properti Background-Color </title>
        <style>
            header{
                background-color: red;
            }
            main{
                background-color: rgba(0,255,0,1);
            }
            footer{
                background-color: #0000FF;
            }
        </style>
    </head>

    <body>
        <header> Background dengan Warna Merah </header>
        <main> Background dengan Warna RGBA(Hijau) </main>
        <footer> Background dengan Warna HEX(Biru) </footer>
    </body>

</html>

Jika Berhasil dengan Kode HTML+CSS diatas, berikut screenshot dari hasil kode diatas jika ditampilkan pada Halaman Web Offline :

contoh warna background dengan kode css
Gambar 2

3. Background-Image

Property CSS ini merupakan properties yang bisa Anda gunakan untuk mengatur dan menentukan sebuah gambar yang akan dgunakan sebagai background dari suatu elemen atau selector.

Penggunaan properti background-image dimaksudkan untuk menampilkan sebuah gambar pada halaman web. Adapun Value atau nilai dari properti tersebut yaitu sebuah url yang menunjukkan lokasi file gambar disimpan.

Untuk melakukan pengujian dengan properti background-image pada CSS, sebelumnya Anda siapkan dulu 2 buah file. File Pertama adalah Gambar yang akan digunakan sebagai background pada Halaman Web. File Kedua adalah File Html yang berisikan kode Html dan Kode CSS, berikut isi dari File Html Tersebut :

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Contoh Penggunaan Properti Background-Image </title>
        <style>
            body{
                background-image: url('php.png');
            }
        </style>
    </head>

    <body>
        <!-- Gambar Akan muncul pada Elemen Body -->
    </body>

</html>

Setelah Anda Mempersiapkan Gambar dan menulis ulang atau copy kode diatas kemudian simpan dengan nama 'index.html'. klik double, pada file 'index.html' atau buka pada web browser, jika berhasil akan seperti berikut :

contoh background gambar dengan kode css
Gambar 3

Jika diperhatikan dengan teliti dari Hasil diatas, sebenarnya penggunaan dari background-image mempunyai kelemahan, jika kita mempunyai gambar dengan ukuran kecil, maka secara default penggunaan dari background-image akan melakukan looping/perulangan pada halaman web secara horizontal dan vertical.

Bisa dilihat dari hasil diatas, halaman web menampilkan gambar lebih dari satu, padahal gambar yang disiapkan hanya satu saja. untuk itulah CSS mempersiapkan properti lain yang berguna membuat looping gambar tidak terjadi. untuk properti tersebut yaitu properti 'background-repeat'.

4. Background-Repeat

Properti background-repeat merupakan properti pelengkap dari properti background-image. Sedangkan fungsi berguna untuk mengatur perulangan dari sebuah gambar. Perulangan tersebut apakah akan diulang secara horizontal, vertical atau tidak diulang. berikut ini value atau nilai dari background-repeat :

Daftar Tabel untuk Background-Repeat
NoValueDeskripsi
1repeatmembuat gambar pada background melakukan perulangan secara horizontal dan vertical
2repeat-xmembuat gambar pada background melakukan perulangan secara horizontal
3repeat-zmembuat gambar pada background melakukan perulangan secara vertical
4no-repeatmembuat gambar pada background hanya satu atau tidak melakukan perulangan

Setelah Anda mengetahui beberapa value dasar untuk properti background-repeat. Selanjutnya untuk penggunaan background-repeat, bisa dikatakan akan berfungsi jika bersamaan dengan properti background-image. Berikut contoh kodenya :

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Contoh Penggunaan Properti Background-Repeat </title>
        <style>
            body{
                background-image: url('php.png');
                background-repeat: no-repeat;
            }
        </style>
    </head>

    <body>
        <!-- Gambar Akan muncul pada Elemen Body Tanpa Looping -->
    </body>

</html>

Berikut Screenshot dari contoh kode diatas jika ditampilkan pada halaman web :

contoh background gambar tanpa looping dengan kode css
Gambar 4

5. Background-Position

Backgroud-position merupakan properti yang mengatur dan mengarahkan posisi gambar dari penggunaan background-image, bisa dikatakan properti background-position sebagai pelengkap dari properti background-image.

Fungsi dari background-position lebih mirip dengan fungsi dari properti text-align pada css. Perbedaannya, text-align berfungsi mengatur posisi dari semua elemen, sedangkan background-position digunakan bersamaan dengan properti background-image. berikut ini beberapa valuenya :

Daftar Tabel untuk Background-Position
NoValueValue
1left topright top
2left centerright center
3left bottomright bottom
4center top50% 50%
5center center50px 50px
6center bottominitial

Untuk value atau nilai yang dalam bentuk ukuran seperti px dan %, Anda bisa menyesuaikan sendiri sesuai yang diinginkan. misalnya "background-position: 25% 75%;", dimana ukuran 25% untuk posisi Vertical dan 75% untuk posisi horizontal. contoh kode :

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Contoh Penggunaan Properti Background-Position </title>
        <style>
            body{
                background-image: url('php.png');
                background-repeat: no-repeat;
                background-position: right top;
            }
        </style>
    </head>

    <body>
        <!-- Gambar Akan muncul pada Elemen Body -->
    </body>

</html>

Berikut Screenshot dari contoh kode diatas jika ditampilkan pada halaman web :

contoh background gambar dengan posisi kanan atas menggunakan kode cs
Gambar 5

6. Background-Attachment

background-attachment merupakan properti yang digunakan bersamaan dengan background-image. dimana fungsi dari properti tersebut untuk mengatur suatu gambar apakah jika mouse di scroll gambar ikut scroll atau tetap.

background-attachment lebih sering digunakan untuk membuat gambar pada latar belakanag fixed atau diam ketika mouse di scroll. berikut ini beberapa value atau nilai dari background-attachment :

Daftar Tabel untuk Background-Attachment
NoValueDeskripsi
1scrollgambar background akan bergulir jika mouse dicroll
2fixedgambar background akan diam/tidak bergulir jika mouse di scroll
3localgambar background akan bergulir dengan isi dari element atau content
4initialmengatur properti ke nilai standarnya/default.

dari beberapa value untuk background-attachment diatas, berikut ini contoh kode, penggunaan background-attachment dengan value fixed. Anda juga bisa mencobanya sendiri dengan mengganti value dari properti tersebut.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Contoh Penggunaan Properti Background-Attachment </title>
        <style>
            body{
                background-image: url('php.png');
                background-repeat: no-repeat;
                background-position: center center;
                background-attachment: fixed;
            }
        </style>
    </head>

    <body>
        <!-- Gambar Akan muncul pada Elemen Body -->
    </body>

</html>

Berikut Screenshot dari contoh kode diatas jika ditampilkan pada halaman web :

contoh background gambar dengan tambahan attachment fixed dan posisi center menggunakan kode cs
Gambar 6

7. Background-Size

background-size merupakan properti pelengkap dari properti background-image. properti tersebut berguna untuk mengatur ukuran gambar background sesuai yang diinginkan. berikut value dari properti background-size :

Daftar Tabel untuk Background-Size
NoValueDeskripsi
1px, em, mm, cm, dllMengatur lebar dan tinggi dari gambar background dengan ukuran. misal 10px 5px, 10px untuk lebar dan 5px untuk tinggi.
2%Mengatur lebar dan tinggi dari gambar background dalam ukuran persen. misal 50% 25%, 50% untuk lebar dan 25% untuk tinggi.
3autogambar background akan ditampilkan secara asli(ukuran asli dari gambar)
4containresize image, merubah ukuran gambar dan memastikan gambar terlihat sepenuhnya
5covermembuat gambar background fullscreen.
6initialsetel value ke default.

dari beberapa value diatas, Anda bisa mengatur sebuah gambar menjadi fullscreen dengan value cover. berikut ini contoh kode untuk properti background-size :

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Contoh Penggunaan Properti Background-Size </title>
        <style>
            body{
                background-image: url('php.png');
                background-repeat: no-repeat;
                background-position: center center;
                background-attachment: fixed;
                background-size: auto 100%;
            }
        </style>
    </head>

    <body>
        <!-- Gambar Akan muncul pada Elemen Body -->
    </body>

</html>

Berikut Screenshot dari contoh kode diatas jika ditampilkan pada halaman web :

contoh background gambar dengan ukuran auto 100% menggunakan kode cs
Gambar 7

8. Background

Properti Background merupakan properti yang digunakan untuk mempersingkat penulisan property CSS. artinya, Anda tidak perlu menulis properti background-color, background-image, background-repeat maupun background-posisition secara bersamaan. Anda hanya cukup menggunakan properti background saja.

Value dari properti background berisi value dari properti lain, seperti value dari background-color, background-image, background-repeat, atau background-posisition. berikut aturan menulis kodenya :

contoh kode/program/sintaks css
selector { background: white url('php.png') no-repeat left top; }