Background dalam CSS

Halo semua, pada kali ini saya akan memberikan materi tentang Background dalam CSS. Sebelum melanjutkan materi kali ini, pastikan kamu sudah membaca materi yang sebelumnya pernah kita bahas, yaitu Cara Menghubungkan Html dengan CSS. Karena untuk melanjutkan ke materi berikutnya, kita harus sudah paham cara menghubungkan html dengan CSS. Background dalam CSS memiliki banyak properti yang dapat digunakan, diantaranya adalah :

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

Kita akan membahas tentang Background dalam CSS satu per satu, mulai dari background-color.

Background Color

Sesuai dengan namanya background color, background ini menggunakan warna. Selain itu, kita juga bisa mengatur panjang dan lebar dari background ini. Berikut ini adalah contoh codingan nya.

body {
  background-color: blue;
}

Untuk penggunaan nya seperti dibawah ini

<!DOCTYPE html>
<html>
  <head>
    <title> Penggunaan Background dalam CSS </title>
    <style>
       body {
         background-color: blue;
            }
    </style>
  </head>
  <body>
    <h1> Hallo Semua! </h1>
    <p> Ini merupakan contoh penggunaan background dalam CSS dengan warna biru </p>
  </body>
</html>

Hasilnya seperti dibawah ini

Backgrond Image

Background Image merupakan background yang menggunakan sebuah gambar. Untuk menggunakan background image, kita membutuhkan properti background-repeat. Apa itu background-repeat ? Nanti kita lihat perbedaan antara menggunakan background-repeat dan tidak menggunakan background-repeat. Berikut ini contoh codingan nya.

body {
  background-image: url("linkgambar.png");
  background-repeat: no-repeat;
}

Codingan lengkapnya seperti dibawah ini

<!DOCTYPE html>
<html>
  <head>
    <style>
        body {
          background: url("https://i.ibb.co/8DW2fvF/burung.jpg");
          background-repeat: no-repeat;
             }
    </style>
  </head>
  <body>
    <h1> Contoh Backgroud Image</h1>
    <p> Ini merupakan contoh penggunaan background dengan gambar </p>
  </body>
</html>

Hasilnya seperti dibawah ini

Sekarang kita akan mencoba tanpa menggunakan backgroud-repeat. Berikut ini contoh codingan nya

<!DOCTYPE html>
<html>
  <head>
    <style>
        body {
          background: url("https://i.ibb.co/8DW2fvF/burung.jpg");
             }
    </style>
  </head>
  <body>
    <h1> Contoh Backgroud Image</h1>
    <p> Ini merupakan contoh penggunaan background dengan gambar </p>
  </body>
</html>

Hasilnya seperti dibawah ini

Sudah lihat kan perbedaan nya ? Jika menggunakan background-repeat, maka background gambarnya hanya satu. Sedangkan jika tidak menggunakan background-repeat gambarnya menjadi banyak sesuai dengan panjang dan lebar device nya. Jika kamu bingung cara mendapatkan link gambar nya, kamu bisa melihat tutorial ini. Selain itu, kamu juga bisa memindahkan posisi background gambarnya. Contohnya seperti ini

<!DOCTYPE html>
<html>
  <head>
    <style>
        body {
          background: url("https://i.ibb.co/8DW2fvF/burung.jpg");
          background-repeat: no-repeat;
          background-position: right top;
             }
    </style>
  </head>
  <body>
    <h1> Contoh Backgroud Image</h1>
    <p> Ini merupakan contoh penggunaan background dengan gambar </p>
  </body>
</html>

Hasilnya seperti dibawah ini

Posisinya bisa kamu ubah sesuai keinginan mu. Contohnya top, right, left dan buttom.

Background Attachment

Background attachment digunakan untuk menentukan apakah background nya posisi tetap atau posisi nya dapat di scroll. Contoh codingan nya seperti dibawah ini

<!DOCTYPE html>
<html>
  <head>
    <style>
       body {
         background: url("https://i.ibb.co/8DW2fvF/burung.jpg");
         background-repeat: no-repeat;
         background-position: right top;
         margin-right: 200px;
         background-attachment: fixed;
            }
    </style>
  </head>
  <body>
    <h1> Contoh penggunaan background attachment </h1>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya tetap, silahkan coba scroll ke bawah </p>
  </body>
</html>

Hasilnya seperti dibawah ini

Diatas merupakan contoh penggunaan background-attachment yang sifatnya fixed (tetap). Jadi ketika di scroll ke bawah, gambarnya akan tetap berada disitu. Selain fixed, kita juga bisa menggunakan scroll. Berikut ini adalah contoh dari penggunaan background-attachmnent yang sifatnya scroll

<!DOCTYPE html>
<html>
  <head>
    <style>
       body {
         background: url("https://i.ibb.co/8DW2fvF/burung.jpg");
         background-repeat: no-repeat;
         background-position: right top;
         margin-right: 200px;
         background-attachment: scroll;
            }
    </style>
  </head>
  <body>
    <h1> Contoh penggunaan background attachment </h1>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
    <p> Background ini posisinya scroll, silahkan coba scroll ke bawah </p>
  </body>
</html>

Hasilnya seperti dibawah ini

Itulah cara penggunaan Background dalam CSS. Jika ada yang kurang kamu pahami, silahkan bertanya di kolom komentar

10 komentar

Anonim 30/6/23 13:57

Mantep artikelnya Bang Beku, ditunggu tutorial berikutnya :)
1. Mr. Freeze 30/6/23 15:32
  
  Request artikel nya bang
2. Anonim 30/6/23 18:59
  
  Ajarin sql bang, lagi materi inner join nih
3. Mr. Freeze 30/6/23 19:13
  
  https://freezegans.blogspot.com/2022/11/tutorial-mencari-celah-sql-injection.html
  
  Udh ku share disini
Anonim 30/6/23 13:58

Teruslah berkarya mister beku ❄
1. Mr. Freeze 30/6/23 14:44
  
  Okee Makasih 🔥
Anonim 30/6/23 14:04

info loker bang beku
1. Mr. Freeze 30/6/23 15:33
  
  Loker apa ?
Anonim 30/6/23 17:38

pengen komen, tapi saya ga ngerti css kontol
1. Mr. Freeze 30/6/23 17:42
  
  Makanya belajar disini 🗿

Freeze Gans

Background dalam CSS

10 komentar

Cara Membuat Sistem Login Menggunakan Javascript

Pengenalan HTML

Download Ksweb Pro

Percabangan dalam Javascript

Variabel dan Tipe Data dalam Javascript

Freezegans