Cara membuat background di html

Question

Table of Contents Show

Cara menambahkan background dengan warna
pertama dengan inline style
kedua dengan internal style
Cara menambahkan background dengan gambar
Bagaimana cara untuk memberi background berupa gambar pada HTML?
Bagaimana cara menambahkan warna latar belakang dalam HTML?
Apa tag yang tepat untuk menambahkan gambar latar?
Apa itu background

pada tutorial membuat halaman html sederhana hanya menampilkan teks saja tanpa ada background di html

menambahkan background di html adalah salah satu tugas paling umum saat kita mengerjakan Desain Web.

ada berbagai cara untuk menambahkan background di html, langsung saja simak tutorial berikut ini.

Cara menambahkan background dengan warna

sebelum adanya HTML 5 untuk menambahkan backgrund warna cukup menambahkan atribut bgcolor, namun cara tersebut sekarang sudah ditinggalkan.

untuk menambahkan background warna sekarang menggunakan CSS seperti dibawah ini.

ada dua cara untuk menambahkan background

pertama dengan inline style

<!DOCTYPE html>
<html>
<head>
    <title> menambahkan background dengan warna </title>
</head>
<body style="background-color:skyblue">
    <ul>
        <li>Data Rahasia 1</li>
        <li>Data Rahasia 2</li>
        <li>Data Rahasia 3</li>
    </ul>
</body>
</html>
Code language: HTML, XML (xml)

kedua dengan internal style

<!DOCTYPE html>
<html>
<head>
    <title> menambahkan background dengan warna </title>
    <style>
        body {
            background-color:skyblue
        }
    </style>
</head>
<body>
    <ul>
        <li>Data Rahasia 1</li>
        <li>Data Rahasia 2</li>
        <li>Data Rahasia 3</li>
    </ul>
</body>
</html>
Code language: HTML, XML (xml)

kedua cara diatas hasilnya akan sama saja seperti gambar dibawah ini

seluruh page akan berubah backgroundnya menjadi biru langit

style diatas akan membuat elemen yang berada di dalam tag <body> akan memiliki background berwarna langit biru

jika kita ingin menambahkan background di area tertentu misal di list kedua kita akan menambahkan background dengan memakai class di html

Baca juga : fungsi class pada html

<!DOCTYPE html>
<html>
<head>
    <title> menambahkan background di bagian tertentu </title>
    <style>
        .bg-skyblue {
            background-color:skyblue
        }
    </style>
</head>
<body>
    <ul>
        <li>Data Rahasia 1</li>
        <li class="bg-skyblue">Data Rahasia 2</li>
        <li>Data Rahasia 3</li>
    </ul>
</body>
</html>
Code language: HTML, XML (xml)

list kedua backgroundnya warna biru

kenapa backgroundnya warna biru sampai full ? karena background warna ini akan memenuhi seluruh area tag list kedua, seperti saat kita menambahkan background di body maka seluruh area halaman akan berubah warnanya.

jika kita ingin hanya area teks saja yang memiliki background kita bisa menambahkan CSS max-width:max-content;

kamu bisa menambahkan sendiri dengan menekan tombol coba script warna biru dengan kode seperti dibawah ini

<style>
    .bg-skyblue {
        background-color:skyblue
        max-width: max-content;
    }
</style>
Code language: HTML, XML (xml)

maka hasilnya akan menampilkan background hanya di teks saja

Cara menambahkan background dengan gambar

untuk membuat background image berbeda, tidak sama dengan cara menambahkan warna, kita membutuhkan properti css background-image yang akan membuat gambar di latar belakang elemen html

<!DOCTYPE html>
<html>
<head>
    <title> menambahkan background dengan gambar </title>
    <style>
        body {
            background-image: url("https://thohirdev.com/images/posts/user.png");
        }
    </style>
</head>
<body>
    <ul>
        <li>Data Rahasia 1</li>
        <li>Data Rahasia 2</li>
        <li>Data Rahasia 3</li>
    </ul>
</body>
</html>
Code language: HTML, XML (xml)

jika kita perhatikan kode diatas akan menampilkan gambar yang berulang sampai memenuhi lebar halaman.

apabila kita ingin menambahkan gambar hanya satu gambar menggunakan tambahan properti CSS background-repeat: no-repeat;

body {
    background-image: url("https://thohirdev.com/images/posts/user.png");
    background-repeat: no-repeat;
}
Code language: CSS (css)

setelah menambahkan properti tersebut akan menghasilkan tampilan dibawah ini.

Demikian tutorial cara menambahkan background di html, semoga bermanfaat

Bagaimana cara untuk memberi background berupa gambar pada HTML?

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.

Bagaimana cara menambahkan warna latar belakang dalam HTML?

Jika Anda ingin menggunakan warna-warna dasar pada kode HTML, tikkan nama warna tanpa tagar (“#”) sebagai pengganti kode warna HTML. Sebagai contoh, jika Anda ingin menggunakan warna oranye sebagai warna latar halaman, tikkan background-color: orange; .

Apa tag yang tepat untuk menambahkan gambar latar?

Gambar dapat kita tambakan di HTML dengan menggunakan tag <img> . Tag ini memiliki atribut wajib, yakni src .

Apa itu background

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

kode html Apa itu background