Properti CSS yang berfungsi untuk Mengatur depan dan belakang elemen html adalah

Pada video kali ini kita mulai dengan source code kosong. Disini saya sudah menyediakan dua buah file source code yaitu z-index.html dan z-index.css. Keduanya masih kosong ya. Pertama kita isikan file HTML terlebih dahulu.

Kita tambahkan HTML Boilerplate. Lalu kita beri judul z-index. Judul pada file HTML harus dituliskan dua kali ya. Pertama pada tag title. Dan yang kedua kita tambahkan lagi tag h2 di dalam body.

Selanjutnya saya akan membuat 3 buah div dengan nama kelas merah, kuning dan hijau. Dengan menggunakan package emmet, kita cukup menuliskan div.merah+div.kuning+div.hijau dan kita tekan tombol Ctrl+E.

Kita simpan dan refresh browser. Yang kelihatan baru judulnya saja ya. Sedangkan ketiga div tidak kelihatan karena belum memiliki konten dan belum kita atur style-nya.

Selanjutnya kita akan menambahkan CSS. Pertama kita tambahkan dahulu tag link di bagian head, dan kita ubah nilai attribute href menjadi z-index.css. Buka file CSS. Pertama kita buat dahulu selector div. Dan kita tambahkan width dan height dengan nilai 300 pixel. Kemudian kita tambahkan kelas merah kuning hijau dan kita atur background color-nya sesuai dengan nama kelas.

Kita simpan dan refresh browser. Sekarang setiap div sudah tampil di browser dalam bentuk kotak dengan warna merah, kuning dan hijau. Ketiga kotak akan tersusun ke bawah.

Lalu kita tambahkan properti position dengan nilai absolute ke selector div. Kita simpan dan refresh browser. Sekarang ketiga kotak berubah menjadi satu buah kotak berwarna hijau.

Kita telah mempelajari mengenai properti position pada video sebelumnya. Dengan menggunakan nilai absolute, maka semua div akan dikeluarkan dari flow dokumen dan secara default akan ditaruh pada posisi yang sama. Jadi di satu kotak berwarna hijau yang kita lihat disini, sebenarnya ada 3 buah kotak yang bersusun ke belakang. Kotak hijau berada di posisi paling depan dan menutupi kedua kotak lainnya.

Mengapa kotak hijau berada di paling depan? Kita lihat lagi ke kode HTML. Kita lihat posisi div dengan kelas hijau berada di paling bawah. Artinya div yang berada di paling bawah dalam kode HTML, akan berada di posisi paling depan.

Apabila kita hendak mengganti posisi kotak merah menjadi paling depan, maka kita bisa memindahkan kode HTML div merah ke paling bawah. Nah, sekarang kotak yang kelihatan di browser adalah kotak merah.

Namun cara ini lebih repot ya, karena kita harus mengubah-ubah posisi tag di dalam kode HTML. Ada cara lain yang lebih mudah, yaitu dengan menggunakan properti z-index pada kode CSS.

Sebagai contoh, saya kembalikan dahulu kode HTML seperti semula. Dan sekarang browser menampilkan kotak hijau. Pada kelas merah, saya tambahkan properti z-index dengan nilai 1. Kita simpan dan refresh browser. Sekarang browser akan menampilkan kotak merah pada posisi paling depan dan menutupi kedua kotak lainnya.

Jadi properti z-index ini berfungsi untuk mengatur elemen mana yang berada di depan, dan elemen mana yang berada di belakang. Untuk menaruh elemen di posisi depan, maka kita memberikan nilai positif pada z-index. Semakin besar nilainya, maka posisi elemen akan menjadi semakin depan. Jadi apabila kita ingin mengatur agar elemen ini menjadi posisi paling depan diantara semua elemen lain, kita bisa memasukkan angka tinggi ke dalam properti z-index ini. Misalkan kita beri nilai 1000.

Agar lebih jelas, kita atur dahulu posisi ketiga kotak agar menjadi cascade. Pertama hapus dahulu properti z-index pada kotak merah. Lalu kita beri top 60 pixel dan left 0 pixel.

Selanjutnya pada kotak kuning kita tambahkan properti top dengan nilai 160 pixel dan left 100 pixel. Sedangkan pada kotak hijau kita tambahkan properti top dengan nilai 260 pixel dan left 200 pixel. Kita simpan dan refresh browser. Nah, sekarang kita sudah bisa melihat susunan kotak pada browser, dengan kotak hijau berada di paling depan, disusul oleh kotak kuning, dan kotak merah pada bagian paling belakang.

Apabila kita ingin kotak hijau berada di belakang, maka kita bisa menambahkan properti z-index dengan nilai negatif. Misalkan saya tambahkan z-index dengan nilai -1. Dan sekarang kotak hijau berada di belakang kotak kuning.

Dan selanjutnya apabila saya ingin agar kotak kuning juga berada di belakang kotak merah. Maka saya bisa menambahkan juga z-index dengan nilai -1 pada kelas kuning.

Nah sekarang posisi kotak apabila dilihat dari depan ke belakang adalah merah, hijau, kuning. Dan apabila saya ingin mengubah agar kotak hijau menjadi dibelakangnya kotak kuning, maka saya bisa mengubah nilai z-index-nya menjadi -2. Sekarang posisi kotak menjadi merah, kuning, hijau. Kotak hijau berada dibelakang kotak kuning, karena nilai z-index kelas hijau lebih minus daripada nilai z-index kelas kuning.

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.

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.

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>
    <h2>Mengatur warna latar belakang html</h2>
</body>
</html>
Code language: HTML, XML (xml)

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

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>
     <h2>Mengatur warna latar belakang html</h2>
</body>
</html>
Code language: HTML, XML (xml)

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

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>
Code language: HTML, XML (xml)

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.

background-repeat: repeat

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

background-repeat: repeat-x

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

background-repeat: repeat-y

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

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;
       <span style="color: #ff0000;"> background-position: right top;</span>
        color: white;
    }
 </style>
Code language: HTML, XML (xml)

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: <span style="color: #ff0000;">100px 100px</span>;
        color: white;
    }
 </style>
Code language: HTML, XML (xml)

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');
        <span style="color: #ff0000;">background-attachment: fixed;</span>
        color: white;
    }
 </style>
Code language: HTML, XML (xml)

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

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: <span style="color: #ff0000;">width</span> <span style="color: #0000ff;">height</span>;
Code language: HTML, XML (xml)

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;
        <span style="color: #ff0000;">background-size: 500px 400px;</span>
        color: white;
    }
 </style>
Code language: HTML, XML (xml)

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;
        <span style="color: #ff0000;">background-size: cover;</span>
        color: white;
    }
 </style>
Code language: HTML, XML (xml)

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 {
        <span style="color: #ff0000;">background: yellow url('image/bg.jpg') no-repeat center center;</span>
        color: white;
    }
 </style>
Code language: HTML, XML (xml)

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

Properti CSS apa saja?

Apa itu background image?

Apa itu background repeat?