Cara Membuat Gambar Background di HTML

By Posted on

Cara Membuat Gambar Background di HTML –  Pencarian visual yang menarik dalam halaman web menjadi semakin penting di era digital saat ini. Salah satu cara untuk mencapai ini adalah dengan menggunakan latar belakang gambar yang menarik perhatian pengunjung Anda. Dalam panduan ini, kita akan membahas langkah-langkah detail untuk membuat latar belakang gambar di halaman web menggunakan HTML dan CSS. Apakah Anda seorang pemula dalam dunia pengembangan web atau mencari cara baru untuk meningkatkan tampilan situs Anda, langkah-langkah sederhana ini akan membantu Anda menciptakan pengalaman visual yang menakjubkan. Mari kita jelajahi cara membuat efek latar belakang gambar yang menarik dan memukau!

Alat yang Dibutuhkan

Beriku ini beberapa alat yang dibutuhkan untuk dapat membuat gambar background di html:

  • Perangkat laptop,
  • Notepad++ (Text editor code),
  • Google chrome (Web browser),
  • Niat yang kuat.

Cara Membuat Gambar Background di HTML

1. Buat Folder Project Background Gambar

Pertama, pastikan Anda memiliki folder khusus untuk proyek Anda. Dalam folder ini, Anda akan menyimpan semua file yang terkait dengan halaman web Anda.

2. Buat Folder Img

Di dalam folder proyek Anda, buatlah folder bernama “img“. Di sinilah Anda akan menyimpan gambar latar belakang yang ingin Anda gunakan. Download gambar disini untuk di implementasikan dalam proyek gambar background di html.

3. Buat Sebuah File background.html

Buatlah file baru dalam folder proyek Anda dan beri nama “background.html”. Ini akan menjadi halaman HTML utama Anda di mana Anda akan menampilkan latar belakang gambar.

Baca Juga:  Cara Membuat Button Gambar dengan HTML dan CSS

Berikut ini source code html yang harus Anda tambahkan untuk dapat membuat gambar background di html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Sederhana</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Selamat Datang di Website Saya</h1>
        <p>Website ini dibuat dengan HTML dan CSS</p>
    </header>
    <nav>
        <ul>
            <li><a href="https://riztekno.com/">Beranda</a></li>
            <li><a href="https://riztekno.com/">Tentang Kami</a></li>
            <li><a href="https://riztekno.com/">Layanan</a></li>
            <li><a href="https://riztekno.com/">Kontak</a></li>
        </ul>
    </nav>
    <section class="content">
        <h2>Tentang Kami</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor ligula in justo faucibus, vitae scelerisque felis tempor. Nulla facilisi.</p>
        <p>Phasellus euismod dignissim magna, sed tristique dui tempor at. Proin sollicitudin nisi a velit condimentum, nec molestie arcu aliquam.</p>
    </section>
    <footer>
        <p>Hak Cipta &copy; 2024 | Website Saya</p>
    </footer>
</body>
</html>
 

4. Buat File style.css

Sekarang, buatlah file CSS baru dalam folder proyek Anda dan beri nama “style.css“. File ini akan digunakan untuk mengatur gaya halaman web Anda, termasuk latar belakang gambar.

Baca Juga:  Cara Membuat Input Tanggal di HTML

Berikut ini source code css yang harus Anda tambahkan untuk membuat gambar background di html:

/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body styles */
body {
    font-family: Arial, sans-serif;
    background-image: url('img/background.jpg');
    background-size: cover;
    background-position: center;
    color: #ffffff;
    padding: 20px;
}

/* Header styles */
header {
    text-align: center;
    margin-bottom: 20px;
}

header h1 {
    font-size: 36px;
}

header p {
    font-size: 18px;
}

/* Navigation styles */
nav ul {
    list-style-type: none;
    text-align: center;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #ffffff;
    font-size: 18px;
}

/* Content styles */
.content {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 10px;
}

.content h2 {
    font-size: 24px;
    margin-bottom: 10px;
}
 

5. Mengubah Tampilan Background Gambar

Anda perlu mengganti nilai properti url di CSS dengan nama file gambar yang ingin Anda gunakan sebagai latar belakang. Pastikan untuk menyimpan gambar tersebut di dalam folder “img” yang telah Anda buat.

6. Simpan & Lihat Tampilan

Setelah mengubah CSS sesuai keinginan Anda, simpan semua file (background.html, style.css, dan gambar) dalam folder proyek Anda. Buka file background.html menggunakan browser web Anda untuk melihat tampilan latar belakang gambar yang baru Anda buat.

Baca Juga:  Cara Membuat Checkbox di HTML

Preview hasil

Berikut ini preview hasil gambar background di html jika Anda berhasil membuatnya:

Penutup

Pencarian visual yang menarik dalam halaman web menjadi semakin penting di era digital saat ini. Salah satu cara untuk mencapai ini adalah dengan menggunakan latar belakang gambar yang menarik perhatian pengunjung Anda. Dalam panduan ini, kita telah menjelajahi langkah-langkah detail untuk membuat latar belakang gambar di halaman web menggunakan HTML dan CSS. Dengan mengikuti petunjuk ini, Anda dapat meningkatkan daya tarik visual situs web Anda, memberikan kesan yang lebih profesional, dan menarik lebih banyak pengunjung.

Jangan ragu untuk bereksperimen dengan variasi lainnya dalam CSS untuk mencapai efek latar belakang yang unik dan sesuai dengan visi Anda. Ingatlah bahwa pengalaman pengguna adalah kunci, jadi pastikan gambar latar belakang Anda tidak mengganggu keterbacaan atau navigasi situs.

Dengan demikian, semoga panduan ini memberikan wawasan yang berguna bagi Anda dalam mengembangkan halaman web yang menarik dan berkesan. Jadikanlah latar belakang gambar sebagai salah satu elemen desain yang memperkaya pengalaman pengguna Anda secara keseluruhan. Terima kasih telah mengikuti panduan ini, dan semoga sukses dalam perjalanan pengembangan web Anda!

Related posts: