Cara mengatur ukuran background di html tanpa css

Question

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

Table of Contents Show

Cara menambahkan background dengan warna
pertama dengan inline style
kedua dengan internal style
Cara menambahkan background dengan gambar
Apa tag HTML yang tepat untuk menambahkan warna background?
Apa elemen HTML yang digunakan untuk menyisipkan gambar latar belakang?
Apa itu background pada CSS?

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

Coba Script

<!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

Coba Script

<!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

Coba Script

<!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

Coba Script

<!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;

Apa tag HTML yang tepat untuk menambahkan warna background?

Untuk mengatur warna latar belakang dalam HTML, gunakan atribut style. Atribut style menentukan gaya sebaris untuk sebuah elemen. Atribut ini digunakan dengan tag HTML <body>, dengan properti CSS background-color.

Apa elemen HTML yang digunakan untuk menyisipkan gambar latar belakang?

Untuk menambahkan background di html maka perlu menggunakan style CSS (Cascading Style Sheet). Style ini dapat kita buat langsung didalam tag <head> pada dokumen htmlnya.

Apa itu background pada CSS?

CSS background-image digunakan untuk mengatur gambar latar belakang sebuah elemen HTML. Secara default, background gambar akan diulang (repeat) sehingga memenuhi seluruh elemen. Untuk cara penggunaanya silahkan ikuti contoh di bawah ini. Namun sebelumnya siapkan gambar yang akan dijadikan sebagai latar belakang.

kode html