Penerapan Properti Background Pada CSS

Pada tutorial kali ini kita akan membahas penerapan properti background pada css, background atau latar belakang adalah sebuah elemen utama untuk menentukan bagaimana sebuah objek ditampilkan agar terlihat menarik dan tidak terlihat monoton.

Secara bawaan background pada dokumen html memiliki warna putih, nah disini kita akan pelajari bagaimana cara penerapan properti background pada css ini untuk berubah background warna bawaan browser tersebut ke bentuk warna atau sebuah gambar.

Penerapan Properti Background Pada CSS

Ada beberapa properti background untuk mengatur atau membuat background agar tampak sesuai dengan yang kita inginkan, mulai dari warna, posisi, sifat dan lainnya. Berikut ini properti-properti yang dimiliki background.

Properti Keterangan
background Properti singkat untuk menentukan sebuah background elemen yang mewakili beberapa properti background lainnya dengan pemberian nilai secara bersamaan.
background-color Untuk menentukan warna latar belakang sebuah elemen html.
background-image Untuk menjadi gambar sebagai latar belakang dokumen html atau elemen html.
background-repeat Untuk mengatur kontrol pengulangan pada background gambar.
background-position Untuk mengatur kontrol posisi pada background gambar.
background-attachment Untuk mengatur kontrol scrolling pada background gambar.
background-size Untuk mengatur kontrol ukuran pada background gambar.

Dari jenis-jenis properti kita akan bahas satu persatu penerapan properti background pada css ini, yang perlu diingat adalah sesuaikan objek pada html yang ingin kita ubah latar belakangnya, jangan sampai warna background dengan warna teks serupa, hal tersebut akan membuat teks tidak dapat terbaca.

Menentukan Warna Background Pada CSS

Jika pada bawaan browser warna background pada dokumen html memiliki warna putih, pada tutorial ini kita akan menentukan warna background pada css tersebut, dalam tutorial ini penulis menggunakan warna kuning dan teks warna hitam.

<!DOCTYPE html>
<html>
    <head>
        <title>Background</title>
        <style type="text/css">
            body {
                background: yellow;
                color: black;
            }
        </style>
    </head>
<body>
    <h1>Mengatur warna latar belakang html</h1>
</body>
</html>

Berikut ini adalah bentuk pewarnaan background yang dihasilkan dari gambar diatas…

Baca juga:  Mengatur Link Dengan CSS

penerapan properti background pada css

Sintaks diatas untuk menentukan keseluruhan warna background dokumen html, anda dapat mencoba untuk menentukan warna background elemen html.

Menentukan Gambar Background Pada CSS

Selain warna kita juga dapat menggunakan gambar sebagai latar belakang halaman website, cara dengan menggunakan properti background-image pada css. Silahkan siapkan gambar apa saja, yang penting nanti disesuaikan dengan ekstensi gambar tersebut. Berikut ini kodenya.

<!DOCTYPE html>
<html>
    <head>
        <title>Background</title>
            <style type="text/css">
                body {
                   background-image: url('image/bg.jpg');
                   color: white;
                }
           </style>
    </head>
<body>
     <h1>Mengatur warna latar belakang html</h1>
</body>
</html>

Berikut ini adalah contoh hasil dari kode diatas jika ditampilkan di browser…

penerapan properti background pada css

Yang perlu diingat bahwa lokasi yang ditentukan pada sintaks background-image harus sesuai tepat dengan lokasi gambar yang disediakan, jika sudah benar pasti gambar tersebut akan tampil.

Mengatur Perulangan Pada Background Image CSS

Pada pembahasan diatas ketika menentukan sebuah gambar untuk dijadikan background maka gambar tersebut akan mengulang atau menjadi banyak, hal tersebut karna untuk menutupi seluruh tampilan halaman browser komputer, dalam properti background-repeat kita dapat mengatur perulangan pada background gambar tersebut.

<style type="text/css">
    body {
        background-image: url('image/bg.jpg');
        background-repeat: repeat-y;
        color: white;
    }
 </style>

Pada properti background-repeat memiliki 4 nilai atau value yang dapat kita gunakan dan salah satunya untuk menghilangkan perulangan background-image agar background tersebut tidak mengulang banyak. Berikut ini masing-masing penjelasannya.

Baca juga:  Mengatur Visibility Di CSS

background-repeat: repeat

Nilai repeat adalah nilai bawaan pada background-repeat, dimana dengan nilai ini background akan mengulang gambar secara horizontal dan vertical.

penerapan properti background pada css

background-repeat: repeat-x

Nilai repeat-x pada properti background-repeat yaitu akan mengatur perulangan background pada css secara horizontal.

penerapan properti background pada css

background-repeat: repeat-y

Nilai repeat-y pada properi background-repeat untuk menentukan gambar background secara vertical, sebaliknya dari repeat-x.

penerapan properti background pada css

background-repeat: no-repeat

Dari kesemuan jenis pengulangan gambar pada background, nilai no-repeat ini justru akan menghentikan atau menghilangkan pengulangan background gambar pada browser.

Mengatur Posisi Background Image Pada CSS

Untuk mengatur posisi background image pada css dapat menggunakan properti background-position dimana kita dapat memberikan nilai antara vertical dan horizontal secara bersamaan, contohnya dibawah ini:

<style type="text/css">
    body {
        background-image: url('image/bg.jpg');
        background-repeat: no-repeat;
        background-position: right top;
        color: white;
    }
 </style>

Nilai pada properti background-posisition yang ditanda warna merah diatas bisa di isi dengan nilai pixel atau dengan menggunakan satuan ukuran lainnya. Dimana nilai pertama untuk posisi vertical dan nilai kedua untuk horizontal.

<style type="text/css">
    body {
        background-image: url('image/bg.jpg');
        background-repeat: no-repeat;
        background-position: 100px 100px;
        color: white;
    }
 </style>

Namun jika dengan menggunakan posisi top, bottom, left, right dalam memberikan posisi pada background-position tergantung pada keyword yang ditulis tersebut.

Mengatur Attachment Background Image Pada CSS

Untuk mengatur attachment pada background image di css yaitu dengan menggunakan properti background-attachment, dimana fungsi background-attachment ini dapat menciptakan background image diam ketika di scroll.

<style type="text/css">
    body {
        background-image: url('image/bg.jpg');
        background-attachment: fixed;
        color: white;
    }
 </style>

Selain nilai fixed, secara default atau bawaan background-attachment memiliki nilai scroll, dimana sebuah background akan tetap mengikuti objek konten di browser.

Baca juga:  Pengertian CSS (Cascading Style Sheets)

Mengatur Ukuran Background Image Pada CSS

Untuk dapat mengatur ukuran background image pada css yaitu dengan menggunakan properti background-size, selain untuk mengatur ukuran background image ini fungsi properti background-size juga dapat menjadikan sebuah gambar background menjadi fullscreen atau full ukuran layar monitor, mari kita bahas satu persatu.

background-size: width height;

Contoh properti diatas digunakan untuk menentukan ukuran lebar dan tinggi sebuah background dimana nilai pertama untuk mengatur lebar dan nilai yang kedua untuk mengatur tinggi background yang diinginkan.

<style type="text/css">
    body {
        background-image: url('image/bg.jpg');
        background-repeat: no-repeat;
        background-size: 500px 400px;
        color: white;
    }
 </style>

Namun bagaimana membuat background image agar menjadi fullscreen atau full layar monitor? gunakan nilai cover untuk menjadikan background tersebut fullscreen atau tampil penuh dilayar monitor.

<style type="text/css">
    body {
        background-image: url('image/bg.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        color: white;
    }
 </style>

Sintaks diatas menggunakan nilai cover dimana background tidak diulang dan dengan nilai cover maka background image yang dihasilkan akan fullscreen.

Menggunakan Properti Singkat Background Pada CSS

Apa itu properti singkat? dari pembahasan diatas beberapa properti bisa dijadikan satu properti yaitu hanya dengan menggunakan properti background saja.

background: color image repeat position;

Contoh lengkap yang bisa digunakan pada properti background…

<style type="text/css">
    body {
        background: yellow url('image/bg.jpg') no-repeat center center;
        color: white;
    }
 </style>

Penggunakan properti background dapat mewakili cara-cara diatas, dengan mempersingkatnya menjadi satu baris kode.