Ketika berselancar di internet, Anda sesungguhnya mengakses atau membuka laman-laman web (web pages). Laman web sendiri adalah dokumen yang diakses melalui internet menggunakan web browser dengan mengetikkan URL atau mengklik link untuk laman web tersebut. Ada dua teknologi utama untuk membuat laman web yaitu HTML dan CSS. Keduanya mempunyai peran berbeda namun tidak terpisahkan dalam pembuatan laman web modern.
Untuk sebuah laman web, HTML ini berperan untuk menentukan struktur dan tipe konten seperti paragraf, heading, list dan image, sedangkan CSS lebih ke penyajian struktur dan konten agar lebih menarik seperti layout, color, margin, padding, font-family dan alignment. Tanpa CSS, Anda tetap bisa menyajikan konten di laman web namun dengan tampilan yang tidak menarik.
Baca artikel Tata Cara Penulisan Atau Sintaksis CSS
CSS didesain untuk digunakan dengan HTML. Ada tiga cara berbeda di dalam menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS. Tergantung keperluan, bisa saja ketiga cara menggunakan CSS tersebut dipakai semua dalam membuat laman web. Berikut ini adalah penjelasan singkat untuk masing-masing cara menggunakan CSS dengan HTML:
Baca artikel:
1. Inline CSS.
Inline CSS digunakan untuk memberi style (gaya) pada tag atau elemen HTML tertentu. Anda dapat menggunakan atribut style untuk memberi style pada tag HTML. Style hanya berlaku untuk tag HTML tersebut. Style di inline CSS memiliki prioritas utama dan yang akan digunakan (rendering) meskipun tag HTML tersebut juga sudah diberi style melalui internal CSS atau external CSS.
Pengunaan inline CSS sebenarnya tidak direkomendasikan karena setiap tag HTML perlu diberi style sendiri. Ketika Anda mengubah style di salah satu tag, untuk mendapatkan style yang konsisten, Anda juga perlu mengubah style pada tag-tag lainnya. Misalnya, semua h1 berwarna merah, ketika Anda ingin mengubah h1 menjadi berwarna hijau, Anda perlu mengubah style di semua h1 satu persatu agar berwana hijau.
Berikut ini adalah contoh kode sederhana:
Menggunakan CSS Dengan HTML
Ada dua teknologi utama dalam pembuatan web modern yaitu CSS dan HTML. Keduanya mempunyai peran berbeda namun tidak terpisahkan. Secara umum, ada tiga cara menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS.
2. Internal CSS.
Internal CSS digunakan untuk memberi style yang hanya berlaku pada satu laman web. Style yang diberikan diapit oleh tag
dan diletakkan di bagian elemen head atau tag dari laman web. Anda dapat menggunakan internal CSS bila pemberian style dimaksudkan hanya untuk satu laman web saja dan tidak untuk digunakan di laman web yang lain. Anda dapat menggunakan internal CSS bila kode untuk style tidak terlalu besar atau kompleks.Berikut ini adalah contoh kode sederhana:
Menggunakan CSS Dengan HTML
Ada dua teknologi utama dalam pembuatan web modern yaitu CSS dan HTML. Keduanya mempunyai peran berbeda namun tidak terpisahkan. Secara umum, ada tiga cara menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS.
3. External CSS.
External CSS adalah file berekstensi .css yang hanya berisi kode-kode style. Tujuan menggunakan external CSS adalah untuk memisahkan kode style dengan struktur dan tipe konten laman web. External CSS dapat diaplikasikan pada lebih dari satu laman web sehingga semua laman web akan memiliki tampilan atau desain yang seragam.
Sebagai contoh, buat file CSS bernama csseksternal.css menggunakan plain text editor seperti Notepad atau Notepad++. Tuliskan kode CSS di bawah ini sebagai style yang akan diberlakukan di laman web. Simpan file CSS di folder yang sama tempat menyimpan file HTML.
body {background-color:yellow;} h2 {color:red;} p {color:blue;}
Buat file HTML dan di bagian tag tambahkan elemen link atau tag. Tagini akan digunakan untuk mengacu ke file CSS yang dibuat sebelumnya. Perhatikan penulisanbeserta atributnya untuk mengacu ke file CSS.
Berikut ini adalah contoh kode sederhana:
Menggunakan CSS Dengan HTML
Ada dua teknologi utama dalam pembuatan web modern yaitu CSS dan HTML. Keduanya mempunyai peran berbeda namun tidak terpisahkan. Secara umum, ada tiga cara menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS.
Tiga cara menggunakan CSS dengan HTML di atas menghasilkan tampilan laman web yang sama persis seperti gambar di bawah ini.
Menampilkan sebuah gambar tentu menjadi hal penting dalam mendesain sebuah halaman website. Konten yang memiliki bentuk visual lebih menarik dari pada konten yang seluruhnya hanya berisi teks. Semua itu bisa diatasi dengan menggunakan teknik CSS Background Image.
body { background-image: url('images/contoh-gambar.jpg'); } 1 adalah teknik pada css untuk menampilkan gambar menjadi latar belakang alias background, baik itu pattern maupun gambar ukuran penuh.
Hmm.. menarik juga. Bagaimana caranya? Mari kita pelajari sekarang!
Daftar Isi
Langkah 1: Buat Halaman HTML
Pertama kita harus membuat sebuah halaman html sederhana.
Silahkan buka Notepad teman-teman dan ketikan kode html berikut.
Kode HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Background Image</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <h1>Hello CSS!</h1> </body> </html>
Simpan dan beri nama body { background-image: url('images/contoh-gambar.jpg'); } 2.
Langkah 2: Buat File CSS
Aku lebih sering membuat folder untuk menyimpan file css maupun image sendiri agar lebih terstruktur rapih.
Untuk itu, silakan kamu buat dua buah folder dan beri nama body { background-image: url('images/contoh-gambar.jpg'); } 3 dan body { background-image: url('images/contoh-gambar.jpg'); } 4 dalam direktori folder projek kamu.
Buatlah sebuah file CSS dengan nama body { background-image: url('images/contoh-gambar.jpg'); } 5.
Kemudian letakan ke dalam folder body { background-image: url('images/contoh-gambar.jpg'); } 3 seperti gambar diatas.
Buka file body { background-image: url('images/contoh-gambar.jpg'); } 5 dan ketikan kode berikut.
Kode CSS:
body { background-image: url('../images/contoh-gambar.jpg'); }
Perhatikan cara penulisan direktori diatas.
Aku menggunakan tanda body { background-image: url('images/contoh-gambar.jpg'); } 8 karena folder body { background-image: url('images/contoh-gambar.jpg'); } 4 aku letakan diluar folder body { background-image: url('images/contoh-gambar.jpg'); } 3.
Apabila kamu membuat folder body { background-image: url('images/contoh-gambar.jpg'); } 4 di dalam folder body { background-image: url('images/contoh-gambar.jpg'); } 3 (tidak direkomendasikan), maka penulisannya harus seperti ini:
Kode CSS:
body { background-image: url('images/contoh-gambar.jpg'); }
Simpan dan buka file body { background-image: url('images/contoh-gambar.jpg'); } 2 yang sebelumnya kita buat.
Hasilnya akan seperti gambar berikut.
Langkah 3: Opsi CSS Background Image
Ada beberapa cara untuk mengatur image yang telah kita ubah menjadi background dengan css.
Diantaranya adalah:
Tampilan Background Image Secara Penuh
Kode CSS:
body { color: #fff; background-image: url('../images/contoh-gambar.jpg'); background-size: cover; /* Tambahkan baris berikut */ }
Background Image Fixed (tidak dapat di-scroll)
Kode CSS:
body { color: #fff; background-image: url('../images/contoh-gambar.jpg'); background-size: cover; background-attachment: fixed; /* Tambahkan baris berikut */ }
Background Image Tanpa Pengulangan (body { color: #fff; background-image: url('../images/contoh-gambar.jpg'); background-size: cover; /* Tambahkan baris berikut */ } 4)
Kode CSS:
body { color: #fff; background-image: url('../images/contoh-gambar.jpg'); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; /* Tambahkan baris berikut */ }
Background Image dengan Gradient Warna
Penggunaan css body { background-image: url('images/contoh-gambar.jpg'); } 1 juga dapat dipakai untuk menampilkan warna gradient atau gradasi.
Cara ini biasa diterapkan pada elemen button.
Ada 2 tipe gradasi pada css, yaitu Linear Gradient dan Radial Gradient.
- Linear Gradient, tipe gradasi warna yang menggunakan opsi arah (atas / bawah / kiri / kanan / diagonal / derajat).
- Radial Gradient, tipe gradasi warna yang ditentukan dari titik tengah suatu elemen.
Linear Gradient – Basic
Dasar penggunaan body { color: #fff; background-image: url('../images/contoh-gambar.jpg'); background-size: cover; /* Tambahkan baris berikut */ } 6 secara default dimulai dari atas ke bawah.
Kita akan coba terapkan pada sebuah elemen body { color: #fff; background-image: url('../images/contoh-gambar.jpg'); background-size: cover; /* Tambahkan baris berikut */ } 7.
Syntax:
background-image: linear-gradient(warna atas, warna bawah);
Kode CSS:
button.gradient { background-image: linear-gradient(orange, red); }
Kode HTML:
<body> <button class="gradient">Hello CSS!</button> </body>
Hasil akan seperti berikut:
Hello CSS!Linear Gradient – Derajat
Teknik menggunakan css body { color: #fff; background-image: url('../images/contoh-gambar.jpg'); background-size: cover; /* Tambahkan baris berikut */ } 6 dengan memakai derajat.
Nilai derajat ditulis dengan body { color: #fff; background-image: url('../images/contoh-gambar.jpg'); background-size: cover; /* Tambahkan baris berikut */ } 9 yaitu singkatan dari degree.
Syntax:
body { background-image: url('../images/contoh-gambar.jpg'); } 0
Kode CSS:
body { background-image: url('../images/contoh-gambar.jpg'); } 1
Hasilnya akan seperti berikut:
Linear Gradient – Multi Color
Teknik membuat gradasi warna dengan memakai perpaduan lebih dari 2 warna.
Caranya nggak jauh berbeda dengan contoh-contoh lainnya.
Kita hanya menambahkan opsi warna pada baris body { color: #fff; background-image: url('../images/contoh-gambar.jpg'); background-size: cover; /* Tambahkan baris berikut */ } 6 tersebut.
Syntax:
body { background-image: url('../images/contoh-gambar.jpg'); } 3
Kode CSS:
body { background-image: url('../images/contoh-gambar.jpg'); } 4
Hasilnya akan seperti berikut ini:
body { background-image: url('../images/contoh-gambar.jpg'); } 5Contoh Penggunaan Background Gradient
Nah sob, kurang lengkap kayanya kalau kita nggak coba langsung praktekan ke elemen HTML supaya belajar background image jadi makin sip.
Background Gradient pada Heading
Kamu sudah tau belum, sob? Heading (H1, H2, H3, dst) juga bisa kita bikin keren dengan menggunakan background gradient loh.
Kode HTML:
body { background-image: url('../images/contoh-gambar.jpg'); } 6
Kode CSS:
body { background-image: url('../images/contoh-gambar.jpg'); } 7
Hasil awal dari kode diatas akan tampak seperti ini:
body { background-image: url('../images/contoh-gambar.jpg'); } 8Udah gitu aja? Belum.
Ada kode rahasia supaya warna gradien nya hanya untuk si heading saja, bukan malah menjadi latar. Hehe.
Tambahkan kode berikut pada script css yang telah kita buat.
Kode CSS:
body { background-image: url('../images/contoh-gambar.jpg'); } 9
Hasil akhirnya akan seperti ini:
body { background-image: url('../images/contoh-gambar.jpg'); } 8Gimana keren nggak, sob?
Selain Heading, kamu juga bisa menggunakannya pada elemen Paragraph body { color: #fff; background-image: url('../images/contoh-gambar.jpg'); background-size: cover; background-attachment: fixed; /* Tambahkan baris berikut */ } 1 yaa..
Penutup
Tutorial CSS background image banyak ditemukan di internet sekarang.
Kamu bisa belajar di situs seperti w3schools.
Untuk teman-teman yang ingin belajar membuat website dengan html, aku membuat materi belajar html dari nol khusus pemula.
Materi yang akan dipelajari sebagai berikut:
- Struktur Dasar HTML
- Cara Membuat Heading
- Cara Membuat Halaman Web Saling Terkoneksi
- Teknik Mengubah Link Menjadi Button
- Cara Memasukan Video Youtube
- Cara Memasukan Musik Spotify
- Cara Memasukan Twitter Timeline dan Instagram Post
- dan materi lainnya
Silakan kamu baca materi tersebut di link berikut. Gratis!
Belajar HTML Gampang Banget! – HTML Warrior #1
Demikian tutorial belajar CSS mengubah image menjadi background. Semoga bermanfaat dan jangan lupa share yah 🙂