Cara menggunakan css background image

Ketika men-desain halaman website, adakalanya Anda ingin menampilkan gambar menjadi background full screen memenuhi layar monitor Anda. Atau Anda ingin gambar background tersebut tampil setengah saja (memenuhi setengah screen).

Ada beberapa cara yang dapat Anda gunakan untuk membuat gambar background tampil full screen, yaitu menggunakan CSS ataupun jQuery. Namun pada tutorial ini kita akan membuat gambar background full screen dengan CSS.

Berikut beberapa teknik yang dapat Anda gunakan untuk membuat gambar background full screen dengan CSS.

Daftar Isi

Teknik 1 – Background Full Screen dengan CSS

Cara ini cukup sederhana, pertama Anda cukup membuat tag HTML div yang diberi class. Kemudian Anda menambahkan perintah CSS pada class tersebut.

<div class="bg"></div>

Perintah CSS yang digunakan untuk membuat background full screen ialah :
– Mengatur tinggi gambar menjadi 100%
– Mengatur ukuran gambar menjadi cover
– Dan men-disable gambar agar tidak melakukan repeat

body, html {
    height: 100%;
}

.bg {
    background-image: url("background.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

Demo

Teknik 2 – Background Full Screen

Untuk teknik kedua, Anda dapat membuat background full screen dengan meletakkan gambar menjadi background pada tag html.

html {
    background: url(background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Demo

Teknik 3 – Background Full Screen

Untuk cara ini, background yang ditampilkan dapat mengubah ukurannya di berbagai browser secara otomatis. Juga menggunakan perintah

body, html {
    height: 100%;
}

.bg {
    background-image: url("background.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
0 gambar background dapat diatur.

img.bg {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px) {
    img.bg {
     left: 50%;
     margin-left: -512px;   /* 50% */
    }
}

Demo

Baca juga :
– Membuat Background Video Pada Website Dengan CSS
– Cara Menggunakan Google Fonts
– Membuat Menu Responsive dengan HTML dan CSS
– Mengatur Tata Letak Gambar dengan CSS

Teknik 4 – Background Full Screen

Perintah CSS lainnya yang dapat Anda gunakan untuk membuat background full screen ialah sebagai berikut :

#bg {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
}
#bg img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    min-width: 50%;
    min-height: 50%;
}

Demo

Membuat Background Half Screen

Selain membuat background full screen, Anda juga dapat mengatur gambar menjadi background half screen (background setengah layar). Untuk membuat background half screen sangatlah mudah, Anda hanya cukup mengatur

body, html {
    height: 100%;
}

.bg {
    background-image: url("background.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
1 dari gambar background menjadi
body, html {
    height: 100%;
}

.bg {
    background-image: url("background.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
2. Berikut perintah CSS untuk membuat background half screen selengkapnya.

body, html {
    height: 100%;
}

.bg {
    background-image: url("background.jpg");
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Demo

Kesimpulan

Ada banyak teknik dan kombinasi perintah CSS yang dapat Anda gunakan untuk membuat background full screen. Dari tutorial diatas, silakan gunakan cara yang sesuai dengan kebutuhan Anda. Atau mungkin Anda memiliki kombinasi perintah CSS lainnya untuk membuat background full screen ?! Jika ada, silakan berbagi di kolom komentar.

Untuk memudahkan dalam belajar, Anda dapat mendowload source code dari semua perintah CSS diatas disini

Artikel ini merupakan artikel ke #06 dari seri Tutorial CSS Dasar untuk Pemula. Untuk yang sekiranya sudah memahami tentang properti background css, bisa lanjut ke materi berikutnya yaitu Font di CSS.

Daftar Isi

- Pemanasan

- 6 Properti Dasar Background di CSS
- Properti Background Color CSS
  - Perbedaan Opacity dan Alpha Channel

- Properti Background Image CSS
  - Background Image dengan Gradasi Warna
  - Tips untuk Background Image

- Properti Background Repeat CSS
- Properti Background Position CSS
- Properti Background Attachment CSS
- Properti Background (Shorthand) CSS

- Pendinginan
- Referensi

Pemanasan

Background merupakan salah satu elemen terpenting dalam CSS. Dengannya kita dapat menentukan suatu website akan memiliki tampilan atau tema seperti apa nantinya.

Secara default background halaman web pada browser berwarna putih, namun kita dapat mengubahnya dengan mudah menggunakan properti CSS yang bernama background.

Namun properti untuk mengatur background tidak hanya satu, ada banyak sekali dengan masing-masing properti tersebut memiliki fungsi yang berbeda-beda.

6 Properti Dasar Background di CSS

Tercatat sedikitnya ada 10 properti yang berkaitan dengan background. Namun pada artikel ini, kita hanya akan belajar 6 properti diantaranya:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background

Properti Background Color CSS

Properti background-color berfungsi untuk memberi warna latar pada halaman website. Nilai defaultnya adalah transparent.

Untuk sintaksnya adalah sebagai berikut:


background-color: value;

Kita juga dapat mengganti nilainya menggunakan berbagai format penulisan yang sudah kita pelajari pada artikel sebelumnya, seperti:

  • nama warna – [red, green, blue, yellow]
  • kode hex – [#RRGGBB]
  • ruang warna RGB – rgb(R, G, B)
  • ruang warna HSL – hsl(H, S, L)

Contoh penerapan properti background-color dengan format nilai nama warna.


body{
   background-color: aqua;
}

Hasilnya:

Cara menggunakan css background image
KBackground Color

Sedangkan jika ingin membuat warnanya lebih transparan ada dua cara, yaitu:

  • menggunakan properti opacity
  • menggunakan alpha channel pada ruang warna RGBA atau HSLA

<!DOCTYPE html>
<html>
<head>
    <title>Belajar CSS</title>
    <style>
          #box{
                height: 100px;
                background-color: #20b2aa;
                opacity: 0.1; /* properti opacity */
          }
          #box-2{
                height: 100px;
                /* alpha channel pada rgba */
                background-color: rgba(31, 178, 170, 0.5);
          }
          #box-3{
               height: 100px;
               /* alpha channel pada hsla */
               background-color: hsla(177, 70%, 41%, 0.9);
          }
    </style>
</head>
<body>
    <div id="box"><h1>Kotak 1</h1></div>
    <div id="box-2"><h1>Kotak 2</h1></div>
    <div id="box-3"><h1>Kotak 3</h1></div>
</body>
</html>

Cara menggunakan css background image
Opacity dan Alpha Channel

Sebenarnya ruang warna RGB dan HSL juga bisa menggunakan properti opacity tanpa menambah alpha channel (RGBA dan HSLA), namun ada perbedaan hasil antara keduanya sehingga kita tidak bisa semuanya menggunakan properti opacity.

Perbedaan Opacity dan Alpha Channel

Baik properti opacity atau pun alpha channel pada ruang warna RGBA dan HSLA, keduanya memiliki rentang nilai antara 0 – 1 atau 0% – 100% dalam bentuk persentase.

Semakin mendekati 0 nilainya maka semakin transparan warnanya. Sedangkan bila semakin mendekati 1 nilainya maka semakin jelas warnanya.

Terlepas dari keduanya memiliki format nilai yang sama, keduanya juga memiliki perbedaan.

Ketika kita memutuskan menggunakan properti opacity maka child element pada elemen HTML terkait juga akan ikut menjadi transparan, ini termasuk teks di dalamnya.

Cara menggunakan css background image
Background CSS: Properti Opacity

Sedangkan jika child element HTML tidak ingin ikut menjadi transparan, maka gunakan format penulisan ruang warna RGBA atau HSLA.

Cara menggunakan css background image
Background CSS: Alpha Channel

Jadi gunakan sesuai kebutuhan kalian.

Properti Background Image CSS

Selanjutnya untuk membuat latar belakang berupa gambar kita dapat menggunakan fungsi dari properti background-image.


background-image: value;

Properti background-image memiliki beberapa bentuk nilai, salah satunya berupa url atau lokasi dari file gambar yang akan kita jadikan latar. Sedangkan untuk nilai defaultnya adalah none.

Contoh penerapan properti background-image menggunakan url sebagai nilainya.


body{
      background-image: url('sample.png');
}

Cara menggunakan css background image
Background Image CSS

Pada kode di atas berhubung gambar dan file HTML berada dalam satu folder maka langsung saja tulis nama filenya.

Terdapat beberapa ekstensi gambar yang dapat kita jadikan background seperti JPG, PNG, SVG, WEBP, GIF, dan lain-lain.

Catatan: jangan pernah menggunakan gambar yang dapat mengganggu keterbacaan teks pada website kalian.

Background Image dengan Gradasi Warna

Selain dapat menggunakan gambar, properti background-image juga dapat membuat latar dengan menggabungkan beberapa warna atau biasa kita sebut dengan gradient atau gradasi warna.


<!DOCTYPE html>
<html>
<head>
    <title>Belajar CSS</title>
    <style>
          #banner{
                   height: 150px;
                   background-image: linear-gradient(#fc4a1a, #f7b733);
          }
    </style>
</head>
<body>
    <div id="banner">
        <h1>Banner 1</h1>
    </div>
</body>
</html>

Gunakan koma untuk memisahkan setiap warna.

Cara menggunakan css background image
Background Image: Gradasi Warna

Apakah hanya bisa menggunakan 2 warna? Tidak, kita bisa gunakan lebih dari itu.

Tips untuk Propeti Background Image

Properti background-image juga bisa kita tulis bersamaan dengan background-color. Hal ini biasanya bertujuan sebagai alternatif ketika gambar pada background-image gagal dimuat.


body{
      background-color: gray;
      background-image: url('sample.png');
}

Apakah hal tersebut wajib kita lakukan?

Wajib, bila kita ingin halaman atau elemen HTML tertentu memiliki warna background selain putih. Bersifat opsional bila kita ingin background terkait berwarna apa adanya termasuk putih.

Hal ini juga berlaku ketika nilainya merupakan gradasi warna seperti contoh sebelumnya, meskipun hasilnya sama-sama warna, tidak menutup kemungkinan bila terdapat web browser yang masih belum mendukung properti background-image dengan nilai gradasi warna.


#banner{
         height: 150px;
         background-color: orange;
         background-image: linear-gradient(#fc4a1a, #f7b733);
}

Untuk urutan penulisannya terserah, boleh background-image dulu yang ditulis atau pun sebaliknya background-color dulu, yang pasti prioritas untuk ditampilkan pada halaman website adalah background-image.

Properti Background Repeat CSS

Secara default, ketika kita menggunakan gambar sebagai background, ia akan ditampilkan secara berulang dari kiri ke kanan secara horizontal dan vertikal hingga memenuhi seluruh tempat dari background suatu elemen.

Cara menggunakan css background image
ilustrasi Background Repeat

Sehingga dalam beberapa kasus hal ini tidak diperlukan. Maka dari itu untuk mengatasinya, kita perlu menggunakan yang namanya properti background-repeat.

Properti background-repeat memungkinkan kita untuk mengatur bagaimana background akan ditampilkan secara berulang.

Untuk sintaksnya ada di bawah ini.


background-repeat: value;

Penerapan background-repeat di css.


background-color: value;
0

Ada beberapa nilai yang dapat kita pakai dalam properti ini, namun di sini kita akan bahas 4 nilai yang penting, yaitu:

  • repeat, nilai default yang membuat gambar latar akan ditampilkan berulang secara horizontal dan vertikal.
  • repeat-x, untuk mengulang gambar latar secara horizontal.
  • repeat-y, untuk mengulang gambar latar secara vertikal.
  • no-repeat, agar gambar latar tidak tampil secara berulang.

Agar lebih mudah memahami keempat nilai di atas silahkan lihat ilustrasi di bawah ini.

Cara menggunakan css background image
Illustrasi Tiap Nilai Background Repeat

Properti Background Position CSS

Selanjutnya untuk mengatur posisi dari background kita bisa gunakan properti background-position.

Untuk sintaksnya adalah sebagai berikut.


background-color: value;
1

Properti ini secara default bisa menampung hingga 4 nilai namun dalam artikel ini kita akan bahas penggunaan background-position hanya dengan satu dan dua nilai saja menggunakan format nilai berupa kata kunci.

Properti background-position memiliki format penulisan nilai yang beragam antara lain:

  • menggunakan kata kunci seperti top, bottom, left, dan right.
  • format persentase: x% dan y%
  • format pixel: xpos dan ypos

Setiap nilainya dipisahkan dengan spasi. Sedangkan untuk nilai defaultnya adalah left top atau dalam bentuk persentase adalah x = 0%, y = 0%.

Contoh penerapan background-position:


background-color: value;
2

Cara menggunakan css background image
Background Position

Nilai dari properti background-position pada dasarnya mewakili horizontal (X) dan vertikal (Y) yang mana ketika kita isi suatu nilai dengan left atau right berarti kita sedang mendefinisikan sumbu X dan sebaliknya ketika kita isi nilainya dengan top atau bottom maka kita sedang mendefinisikan sumbu Y.

Jangan pernah menulis nilainya dengan arah yang saling berlawanan misal left right atau bottom top. Karena ini tidak valid.

Khusus nilai berupa keyword, untuk urutan penulisan nilainya boleh bolak-balik, misalnya right top atau top right, tidak jadi masalah karena browser sendiri yang akan menyesuaikannya dan hasilnya pun akan tetap sama.

Selain itu, pada dasarnya kita juga dapat mendefinisikan properti background-position dengan hanya menuliskan satu nilai saja, yang mana ketika hal ini kita lakukan maka nilai yang kedua secara otomatis akan dianggap bernilai center, terlepas dari apapun nilai yang pertama.


background-color: value;
3

Untuk mengetahui masing-masing penerapan nilai, bisa lihat ilustrasi berikut.

Cara menggunakan css background image
Ilustrasi Tiap Nilai Background Position

Properti Background Attachment CSS

Setelah mengatur posisi background, sekarang kita coba untuk menetapkan posisinya, maksud menetapkan di sini adalah kita dapat menentukan apakah posisi gambar latar akan berada tetap di posisinya atau berpindah ketika kita gulir.

Cara menggunakan css background image
Illustrasi Nilai Background Attachment

Dalam kasus ini kita menggunakan properti background-attachment. Sintaks dari background-attachment adalah sebagai berikut:


background-color: value;
4

Setelah itu kita akan coba tes dengan dua nilai pada background-attachment, yang pertama adalah nilai scroll.


background-color: value;
5

Nilai scroll merupakan nilai default dari background-attachment. Nilai ini tidak akan membuat background ikut terbawa ketika kita gulir, alias ia akan tetap berada di posisi awalnya.

Cara menggunakan css background image
Background Attachment: Scroll

Kedua nilai fixed. Nilai ini akan membuat background gambar ikut turun dan naik mengikuti arah gulir.


background-color: value;
6

Cara menggunakan css background image
Background Attachment: Fixed

Properti Background (Shorthand) CSS

Sebenarnya dalam CSS ada suatu teknik yang berguna untuk mempersingkat penulisan nilai dari beberapa properti yang sejenis. Teknik ini dinamakan shorthand. Sedangkan properti yang memiliki kemampuan ini biasa disebut shorthand property.

Properti shorthand memungkinkan kita mendeklarasikan atau menetapkan banyak nilai dari beberapa properti yang berbeda ke dalam satu properti. Dengan syarat properti-properti tersebut masih satu tipe.


background-color: value;
7

Hanya beberapa properti saja yang memiliki kelebihan seperti ini, salah satunya adalah properti background.

Jadi simpelnya, kita dapat menyederhanakan beberapa baris pendeklarasian beberapa properti seperti ini:


background-color: value;
8

menjadi seperti ini, hanya satu baris menggunakan background.


background-color: value;
9

Properti background menampung nilai-nilai dari properti keluarga background itu sendiri seperti:

  • background-color
  • background-image
  • background-size
  • background-repeat
  • background-origin
  • background-clip
  • background-attachment

Dalam penerapannya kita tidak wajib menulis semua nilai properti di atas secara lengkap, jika kita hanya butuh beberapa properti tulis saja nilainya sejumlah properti yang kita butuhkan. Sedangkan untuk yang tidak terdefinisi nantinya akan secara otomatis terisi nilai defaultnya.

Misal kita tidak menyertakan nilai dari background-color, maka secara otomatis pada properti background akan ditetapkan nilai dari background-color sebagai transparent, yaitu nilai defaultnya.

Selain itu, kita juga boleh menulis nilai masing-masing properti secara tidak urut, hanya saja perlu kita perhatikan lagi terutama pada properti yang memiliki lebih dari satu nilai misal background-properti, kita tidak boleh menulisnya secara terpisah seperti ini:


body{
   background-color: aqua;
}
0

Hal ini nantinya akan menyebabkan masalah pada keseluruhan blok deklarasi. Sehingga browser tidak akan menjalankannya karena dianggap tidak valid. Jadi kita harus menuliskannya secara berdampingan sebagaimana mestinya kita menulis nilai dari background-position.


body{
   background-color: aqua;
}
1

Pendinginan

Hari ini kita selesai mempelajari banyak hal dasar mengenai properti background di CSS, mulai dari bagaimana membuatnya hingga mengaturnya.

Lantas, materi apa yang akan kita pelajari pada artikel berikutnya?

Materi yang akan kita pelajari pada artikel berikutnya adalah mengenai Font di CSS. Jadi sampai bertemu di artikel berikutnya!

Apa itu background image CSS?

background-image adalah teknik pada css untuk menampilkan gambar menjadi latar belakang alias background, baik itu pattern maupun gambar ukuran penuh.

Bagaimana cara menyisipkan gambar latar belakang Background image Dalam HTML?

Tikkan <div style="background-image: url('[image url]');"> di baris berikutnya. Inilah label HTML untuk menambahkan gambar latar belakang pada halaman web. Ganti "[image url]" dengan lokasi URL asli dari gambar yang diinginkan.

Apa tag yang tepat untuk menambahkan gambar latar?

Untuk menambahkan background di html maka perlu menggunakan style CSS (Cascading Style Sheet). Style ini dapat kita buat langsung didalam tag <head> pada dokumen htmlnya.

Apa properti CSS yang digunakan untuk mengubah warna latar belakang?

2. Background Color, adalah salah satu properti CSS yang digunakan untuk mengubah warna backround tiap elemen HTML.