Cara menggunakan background image effect css

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 20 : Cara Mengatur Border Image di CSS. Selanjutnya, kita akan mempelajari cara mengatur multi background di CSS.

Table of Contents Show

Atur Background Color
Atur Background Image
Mengulangi Background Image
Atur Posisi Background Image
Atur Background Attachment
Shorthand Property
Apa HTML yang benar untuk inserting background image?
Properti apa yang digunakan untuk latar belakang warna pada CSS?
Apa itu background image?
Apa itu background attachment CSS?

Properti CSS multi background digunakan untuk menambahkan satu atau lebih gambar sekaligus tanpa kode HTML, Kita dapat menambahkan gambar sesuai kebutuhan.

Contoh sintaks gambar multi background adalah sebagai berikut :

#multibackground {
   background-image: url(/css/images/logo.png), url(/css/images/border.png);
   background-position: left top, left top;
   background-repeat: no-repeat, repeat;
   padding: 75px;
}

Nilai yang paling umum digunakan untuk multi background adalah sebagai berikut :

No.Nilai & Deskripsi1background
Digunakan untuk mengatur semua properti gambar background dalam satu bagian2background-clip
Digunakan untuk mendeklarasikan area gambar background3background-image
Digunakan untuk menentukan gambar background4background-origin
Digunakan untuk menentukan posisi gambar background5background-size
Digunakan untuk menentukan ukuran gambar background

Untuk lebih jelasnya, Anda bisa melihat penggunaan multi background melalui contoh berikut ini :

<html>
   <head>
      <style>
         #multibackground {
            background-image: url(https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png), url(https://image.freepik.com/free-photo/abstract-techno-background_1048-8572.jpg);
            background-position: left top, left top;
            background-repeat: no-repeat, repeat;
            padding: 75px;
         }
      </style>
   </head>

   <body>
   
      <div id = "multibackground">
         <h1>mbahwp.com </h1>
         <p>
            Mbah WP adalah website yang membahas berbagai materi seperti bisnis online 
            ,server, web programing, blogging dan masalah terkait teknologi 
            Anda bisa belajar apapun terkait teknologi lewat website ini.
         </p>
      </div>
      
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

CodePen Embed FallbackCodePen Embed Fallback

Semoga tutorial ini membantu Anda untuk mempelajari cara mengatur multi background di CSS untuk mempercantik tampilan dokumen HTML.

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 4 : Tabel Satuan Pengukuran di CSS. Pada tutorial kali ini, kita belajar cara menggunakan properti background di CSS.

Anda dapat mengatur properti background elemen berikut :

Properti background-color digunakan untuk menyetel warna latar belakang sebuah elemen.
Properti background-image digunakan untuk menyetel gambar latar belakang suatu elemen.
Properti background-repeat digunakan untuk mengontrol pengulangan gambar di latar belakang.
Properti background-position digunakan untuk mengontrol posisi gambar di latar belakang.
Properti background-attachment digunakan untuk mengontrol pengguliran gambar di latar belakang.
Properti background digunakan sebagai singkatan untuk menentukan sejumlah properti latar belakang lainnya.

Atur Background Color

Berikut adalah contoh yang menunjukkan bagaimana mengatur warna latar belakang untuk suatu elemen :

<html>
   <head>
   </head>

   <body>
      <p style = "background-color:yellow;">
         Tulisan ini memiliki warna latar belakang kuning.
      </p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

CodePen Embed FallbackCodePen Embed Fallback

Atur Background Image

Kita dapat mengatur gambar latar belakang dengan memanggil gambar yang disimpan lokal seperti yang ditunjukkan di bawah ini :

<html>
   <head>
      <style>
         body  {
            background-image: url("https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png");
            background-color: #cccccc;
         }
      </style>
   </head>
   
   <body>
      <h1>Halo Dunia!</h1>
   </body>
<html>

Browser akan menampilkan hasil sebagai berikut :

CodePen Embed FallbackCodePen Embed Fallback

Mengulangi Background Image

Contoh berikut menunjukkan cara mengulang gambar latar belakang jika gambarnya kecil. Anda dapat menggunakan nilai ‘no-repeat’ untuk properti ‘background-repat’ jika Anda tidak ingin mengulang gambar, dalam hal ini gambar hanya akan ditampilkan sekali.

Secara default properti ‘background-repeat’ akan memiliki nilai ‘repeat’.

<html>
   <head>
      <style>
         body {
            background-image: url("https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png");
            background-repeat: repeat;
         }
      </style>
   </head>

   <body>
      <p>Mbah WP</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

CodePen Embed FallbackCodePen Embed Fallback

Contoh berikut yang menunjukkan bagaimana mengulang gambar latar belakang secara vertikal.

<html>
   <head>
      <style>
         body {
            background-image: url("https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png");
            background-repeat: repeat-y;
         }
      </style>
   </head>

   <body>
      <p>Mbah WP</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

CodePen Embed FallbackCodePen Embed Fallback

Contoh berikut menunjukkan cara mengulang gambar latar belakang secara horizontal.

<html>
   <head>
      <style>
         body {
            background-image: url("https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png");
            background-repeat: repeat-x;
         }
      </style>
   </head>
   
   <body>
      <p>Mbah WP</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

CodePen Embed FallbackCodePen Embed Fallback

Atur Posisi Background Image

Contoh berikut mendemonstrasikan cara mengatur posisi gambar latar belakang 100 piksel dari sisi kiri.

<html>
   <head>
      <style>
         body {
            background-image: url("https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png");
            background-position:100px;
         }
      </style>
   </head>

   <body>
      <p>Mbah WP</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

CodePen Embed FallbackCodePen Embed Fallback

Contoh berikut mendemonstrasikan cara mengatur posisi gambar latar belakang 100 piksel dari sisi kiri dan 200 piksel dari atas.

<html>
   <head>
      <style>
         body {
            background-image: url("https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png");
            background-position:100px 200px;
         }
      </style>
   </head>

   <body>
      <p>Mbah WP</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

CodePen Embed FallbackCodePen Embed Fallback

Atur Background Attachment

Background attachment menentukan apakah gambar latar belakang tetap atau bergulir dengan sisa halaman.

Contoh berikut menunjukkan cara mengatur gambar latar belakang tetap.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>
   </head>

   <body>
      <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

CodePen Embed FallbackCodePen Embed Fallback

Contoh berikut menunjukkan cara mengatur gambar latar bergulir.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png');
            background-repeat: no-repeat;
            background-attachment:scroll;
         }
      </style>
   </head>

   <body>
      <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

CodePen Embed FallbackCodePen Embed Fallback

Shorthand Property

Anda dapat menggunakan properti background untuk mengatur semua properti background sekaligus. Sebagai contoh :

<p style = "background:url(https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png) repeat fixed;">
   Pharagraf ini bernilai fixed repeated background image.
</p>

Semoga tutorial ini membantu Anda mempelajari cara menggunakan properti background di CSS untuk mendesain dokumen HTML.

Apa HTML yang benar untuk inserting background image?

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.

Properti apa yang digunakan untuk latar belakang warna pada CSS?

Property Background berfungsi menampilkan effect warna/gambar latar belakang pada sebuah elemen. Kalau tadi kita bisa mengubah warna teks menggunakan Property Color, sekarang kita juga bisa mengubah warna latar belakang menggunakan Background-color.

Apa itu background image?

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

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.