Cara menggunakan css background cover

Question

Sahabat Webhozz dimanapun berada, apa kabarnya??? Mudah-mudahan sehat selalu dan selalu bahagia ya, amin. To the point aja, ya…

Table of Contents Show

Penerapan Properti Background Pada CSS
Menentukan Warna Background Pada CSS
Menentukan Gambar Background Pada CSS
Mengatur Perulangan Pada Background Image CSS
background-repeat: repeat
background-repeat: repeat-x
background-repeat: repeat-y
background-repeat: no-repeat
Mengatur Posisi Background Image Pada CSS
Mengatur Attachment Background Image Pada CSS
Mengatur Ukuran Background Image Pada CSS
Menggunakan Properti Singkat Background Pada CSS
Bagaimana cara mengganti background suatu elemen di CSS?
Properti apa yang digunakan untuk latar belakang warna pada CSS?
Apa itu background attachment CSS?
Bagaimanakah cara mengubah warna background sebuah section pada website?

Alhamdulillah kali ini kita akan belajar membuat background website full satu halaman. Jadi, di halaman website yang kita buat akan penuh dengan gambar di latar belakangnya.

Oke, langsung aja kita mulai ya…

1. Buat file HTML baru, dan siapkan satu buah gambar. Sangat disarankan gambarnya dengan format landscape. Karena mengikuti format web browsernya.

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.

PropertiKeteranganbackgroundProperti singkat untuk menentukan sebuah background elemen yang mewakili beberapa properti background lainnya dengan pemberian nilai secara bersamaan.background-colorUntuk menentukan warna latar belakang sebuah elemen html.background-imageUntuk menjadi gambar sebagai latar belakang dokumen html atau elemen html.background-repeatUntuk mengatur kontrol pengulangan pada background gambar.background-positionUntuk mengatur kontrol posisi pada background gambar.background-attachmentUntuk mengatur kontrol scrolling pada background gambar.background-sizeUntuk 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>
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>
     <h1>Mengatur warna latar belakang html</h1>
</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…

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

0

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

Bagaimana cara mengganti background suatu elemen di CSS?

jika tidak ingin menggunakan gambar bisa juga dengan mengubah warna background dengan bantuan CSS. untuk mengubah background dengan CSS gunakan property background pada CSS. property background selain di gunakan untuk mengubah background body website bisa juga di gunakan untuk mengubah gambar background pada sebuah ...

Properti apa yang digunakan untuk latar belakang warna pada CSS?

Properti Latar Belakang (Background) CSS yang akan dibahas antara lain: background-color, digunakan untuk mengatur warna lata belakang sebuah elemen HTML. background-image, digunakan untuk mengatur gambar latar belakang sebuah elemen HTML.

Apa itu background attachment CSS?

Properti CSS background-attachment merupakan menentukan apakah posisi bahwa gambar ini adalah tetap dalam viewport, atau gulungan bersama dengan blok yang mengandung.