Cara Membuat Background Gambar dengan CSS (background-image)

A. Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.  Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan.  Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet.  Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.

Baca Juga : Cara Membuat Background Repeat dengan CSS

Fungsi CSS
fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.

Cara Kerja CSS
cara kerja css itu sangatlah mudah, kita hanya perlu menulis stylenya(selector id dan class tersesuaikan) maka secara otomatis akan bekerja pada document html.

B. Pengertian Background
background memiliki arti "latar belakang" adalah bisa diartikan sebagai bidang atau celah yang terlihat paling jauh ketika meihat suatu objek. Dalam bidang desain grafis, background adalah istilah untuk layer yang berada pada posisi paling bawah.

Background, atau yang dikenal dengan latar belakang, merupakan salah satu komponen desain yang cukup penting. Background terutama digunakan untuk memberikan dekorasi visual terhadap sebuah elemen, yang akan mengakibatkan peningkatan kemudahan nalar atau pengertian akan sebuah konten.

Sebenarnya, berbicara tentang image dalam CSS, maka kita sedang membicarakan background-image. Bagaimana menggunakan sebuah gambar menjadi background untuk suatu elemen. Pada bagian ini anda akan mempelajari penggunaan background-image, teknik sprite, dan background-repeat.

background-image

Untuk memanggil gambar sebagai background dari elemen, kita gunakan property background-image. Perhatikan contoh penggunaan property ini :

background-image : url ("images/background.jpg");

Ketika anda menggunakan gambar dengan ukuran kecil maka anda akan melihat background ditampilkan secara berulang untuk memenuhi seluruh element tersebut.

Tersedia di Bacacoding:

• Cara Membuat Background Repeat dengan CSS
• Cara Mempersingkat Penulisan CSS
• Cara Membuat Padding dengan CSS

Untuk percobaan buatlah file dengan nama background.html dan selanjutnya buatlah sebuah div, dan menentukan ukuran width dan heightnya.

<div id = "box"></div>

Dan tambahkan style/CSS seperti berikut :

 #box{
width : 1278px;
height :600px;
background : url(namagambaranda.png);
          }

Berikut Contoh Kode Lengkapnya:

Hasil dari kode diatas adalah:

Nah Bagaimana…? apakah sekarang kamu sudah mengerti Cara Membuat Background Gambar dengan CSS (background-image)? Mungkin itu saja tulisan yang membahas tentang Cara Membuat Background Gambar dengan CSS (background-image), jika terdapat kekurangan ataupun kesalahan dalam penulisan mohon di maafkan dan perbaiki atau lengkapi saja jika terdapat kesalahan. Kalau memang tulisan ini bermanfaat tidak ada salahnya jika men-Sharenya kepada teman kamu yang lain, sekian dan terimakasih.

Share :