Codingku

Cara Membuat Background dengan CSS

Akhlis akhlis

Agar tampilan website lebih menarik, bagian-bagian tertentu pada halaman web biasanya akan diberi background berupa warna maupun gambar.

Penggunaan background yang tepat, bisa membuat pengunjung web betah berlama-lama menikmati konten yang disajikannya.

Lalu bagaimana cara menambahkan background pada elemen web tersebut?

Untuk menambahkan background pada elemen HTML, kamu bisa menggunakan property CSS background.

Property background ini shorthand atau singkatan dari beberapa property yang ditulis dalam satu declaration.

Seperti ini:

body {
  background:
     url(texture.jpg)    /* image */
     top center / 400px 200px /* position / size */
     no-repeat                /* repeat */
     fixed                    /* attachment */
     padding-box              /* origin */
     content-box              /* clip */
     red;                     /* color */
}

Property background terdiri dari 8 properti CSS lainnya, yaitu:

Kamu bisa menggunakan kombinasi dari properti di atas untuk mengatur background elemen.

Jika properti di atas tidak ditentukan pada property background, maka akan digunakan nilai default browser.

Isi Konten

Cara Memberi Warna Background Elemen dengan Property CSS background-color

Property background-color digunakan untuk memberi warna elemen HTML.

Kamu bisa menggunakan properti ini untuk mengatur warna latar belakang seluruh halaman atau bagian tertentu dari halaman web.

Berikut ini contoh cara memberi background halaman web secara penuh.

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial CSS: background-color</title>
    <style>
        body {
            padding: 1.5em 2em;
            background-color: #BBDEFB;
        }
    </style>
</head>

<body>
    <h2>Tutorial CSS Background: background-color</h2>
</body>

</html>

background color

Coba Praktek

Sekarang kita beri warna background pada elemen judul.

Jadi begini kode CSSnya:

body {
    padding: 1.5em 2em;
    background-color: #BBDEFB;
}

h2 {
    padding: 1em;
    background-color: cornflowerblue;
}

​ background color

Cara Memberi Background Gambar dengan Property CSS background-image

Kamu bisa menggunakan properti CSS background-image untuk menetapkan gambar sebagai latar belakang elemen.

Secara default, gambar diulang sehingga menutupi seluruh elemen.

Contoh:

body {
    background-image: url("paralayang.jpg");
}

background image

Kamu juga dapat menautkan gambar atau gift dari website lain dengan menggunakan tautannya.

Seperti ini:

body {
  background-image: url("https://mdn.mozillademos.org/files/11983/starsolid.gif");
}
Coba Praktek

Saat menggunakan nilai url(), kamu memiliki 3 cara:

  • Jalur relative berdasarkan domain root dari file CSS, dimulai dengan garis miring (/) seperti url(/path/to/image.png)
  • Jalur relative berdasarkan direktori langsung dari file CSS, tanpa garis miring seperti url(path/to/image.png)
  • URL absolute, jika kamu menautkan gambar dari website lain seperti url(http://example.com/path/to/image.png)

Cara Menggunakan Property CSS background-repeat

Pengaturan default browser akan mengulang gambar backgrounnd secara vertikal (atas dan bawah) dan secara horizontal (melintasi halaman web).

Kamu bisa mengatur pengulangan gambar background secara vertikal atau horizontal saja dengan property CSS background-repeat.

Contoh untuk mengulang gambar secara vertikal dengan background-repeat: repeat-y;

body {
  background-image: url("paralayang.jpg");
  background-repeat: repeat-y;
}

background repeat

Coba Praktek

Contoh untuk mengulang gambar secara horizontal dengan background-repeat: repeat-x;

body {
  background-image: url("paralayang.jpg");
  background-repeat: repeat-x;
}

background repeat

Coba Praktek

Kamu juga bisa mengatur gambar agar tidak terulang dengan menggunakan background-repeat: no-repeat;

body {
  background-image: url("paralayang.jpg");
  background-repeat: no-repeat;
}

background repeat

Coba Praktek

Properti background-repeat bisa kamu pelajari secara lebih detail di referensi property CSS background-repeat.

Cara Mengatur Lokasi Gambar pada Background dengan Property background-position

Kamu bisa mengatur posisi gambar pada background halaman web dengan properti background-position

body {
  background-image: url("paralayang.jpg");
  background-repeat: no-repeat;
  background-position: right top;
}

background position

Coba Praktek

Properti background-position bisa kamu pelajari secara lebih detail di referensi property CSS background-position.

Cara Membuat Background Image Menjadi Responsive

Memiliki background dengan gambar yang besar menjadi populer digunakan pada website-website perusahaan saat ini.

Namun untuk menerapkan background dengan gambar yang besar tidak mudah dilakukan oleh para pemula karena butuh trik CSS khusus.

Tanpa trik CSS ini, gambar background akan menjadi berantakan jika halaman website dimuat pada perangkat mobile.

Trik CSS ini digunakan untuk membuat background menjadi responsive pada semua layar sesuai aspek rasio.

Bagaimana cara membuatnya?

Yang pertama kamu lakukan yaitu harus membuat elemen container background menggunakan tag div dengan position relative. Misalnya: div class="img__wrapper"></div>

Lalu berilah style CSS pada elemen container tersebut dengan kode berikut:

.img__wrapper {
    position: relative;
    width: 100%;
    padding-top: 75%;
}

Selanjutnya buat lagi elemen baru menggunakan tag div dengan position absolute didalam elemen sebelumnya. Misalnya: <div class="img__bg"></div>.

Kemudian berilah kode CSS berikut ini:

.img__bg {
    /* Menentukan lokasi gambar */
    background-image: url("background-photo.jpg");
    /* Posisi gambar tepat ditengah secara vertikal maupun horizontal */
    background-position: center center;
    /* Agar gambar background tidak berulang */
    background-repeat: no-repeat;
    /* Agar gambar berubah ukuran sesuai ukuran container */
    background-size: cover;
    background-color: bisque;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

Alternatif menggunakan shorthand properti background:

.img__bg {
    background: url(background-photo.jpg) center center cover no-repeat;
    background-color: bisque;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
Contoh:
Coba Praktek