Cara menambahkan logo di css

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.

Table of Contents Show

Langkah 1: Buat Halaman HTML
Langkah 2: Buat File CSS
Langkah 3: Opsi CSS Background Image
Tampilan Background Image Secara Penuh
Background Image Fixed (tidak dapat di-scroll)
Background Image Tanpa Pengulangan (body { color: #fff; background-image: url('../images/contoh-gambar.jpg'); background-size: cover; /* Tambahkan baris berikut */ } 4)
Background Image dengan Gradient Warna
Linear Gradient – Basic
Linear Gradient – Derajat
Linear Gradient – Multi Color
Contoh Penggunaan Background Gradient
Background Gradient pada Heading
Bagaimana Menambahkan gambar di HTML?
Bagaimana cara menghubungkan gambar dan css pada HTML?
Kenapa gambar tidak bisa muncul di HTML?
Apa HTML yang benar untuk menyisipkan gambar latar belakang?

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');
}

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');
}

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');
}

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 */
}

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');
}

Kode CSS:

body {
     background-image: url('../images/contoh-gambar.jpg');
}

Hasilnya akan seperti berikut:

body {
     background-image: url('../images/contoh-gambar.jpg');
}

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');
}

Kode CSS:

body {
     background-image: url('../images/contoh-gambar.jpg');
}

Hasilnya akan seperti berikut ini:

body {
     background-image: url('../images/contoh-gambar.jpg');
}

Contoh 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');
}

Kode CSS:

body {
     background-image: url('../images/contoh-gambar.jpg');
}

Hasil awal dari kode diatas akan tampak seperti ini:

body {
     background-image: url('../images/contoh-gambar.jpg');
}

Udah 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');
}

Hasil akhirnya akan seperti ini:

body {
     background-image: url('../images/contoh-gambar.jpg');
}

Gimana 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 🙂

Bagaimana Menambahkan gambar di HTML?

Cara Memasukkan Gambar di HTML.

Langkah 1: Memastikan Format Gambar Sudah Sesuai..

Langkah 2: Memasukkan Atribut Sumber Gambar pada Tag HTML Images..

Langkah 3: Memberikan Atribut Alt Text pada Tag HTML Images..

Langkah 4: Mencantumkan Keterangan Gambar..

Cara 1: Mengubah Dimensi Gambar..

Cara 2: Memberikan Bingkai Gambar..

Bagaimana cara menghubungkan gambar dan css pada HTML?

Untuk menghubungkan CSS pada HTML, maka kita perlu memasukan sebuah kode pada berkas HTML. Perhatikan baik-baik kode tersebut, disitu menggunakan tag <link> yang digunakan untuk mengubungkan file CSS kedalam HTML, <link rel="stylesheet" type="text/css" href="style.css">

Kenapa gambar tidak bisa muncul di HTML?

Salah satu penyebab gambar tidak muncul di web adalah kesalahan nama folder gambar di kode HTML. Kesalahan tersebut membuat server tidak akan bisa menemukan gambar yang diminta untuk ditampilkan. Jika nama folder sudah dikoreksi, akses kembali halaman website yang gambarnya tidak muncul.

Apa HTML yang benar untuk menyisipkan gambar latar belakang?

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.