Pada tutorial series HTML kali ini Konsep Koding akan berbagi tutorial untuk mengubah Background Warna dan Background Gambar di HTML dengan mudah dan gampang.

Tutorial Mengubah Background Warna/Gambar HTML Mudah
Tutorial Mengubah Background Warna/Gambar HTML Mudah


Mengubah Background Warna HTML CSS

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. HTML5 tidak mendukung atribut tag <body> bgcolor, sehingga gaya CSS digunakan untuk menambahkan warna latar belakang. Atribut bgcolor tidak digunakan lagi dalam HTML5.

Hanya perlu diingat, penggunaan atribut gaya menimpa gaya apa pun yang ditetapkan secara global. Ini akan menimpa gaya apa pun yang diatur dalam tag <style> HTML atau lembar gaya eksternal.


Sebelum nya buat file index.html kemdian tambahkan kode di bawah ini :


<!DOCTYPE html>

<html>

   <head>

      <title>HTML Backgorund Color</title>

   </head>

   <body style="background-color:red;">

      <h1>Hello World</h1>

      <p>Mengubah Warna Pada Background HTML</p>

   </body>

</html>


Untuk mengubahnya anda hanya perlu menambahkan  style="background-color:red;" 

Maka hasilnya akan seperti gambar di bawah ini ketika file inde.html anda di buka di browser:


Mengubah Background Gambar HTML CSS

Properti background-image menyetel satu atau beberapa gambar latar belakang untuk sebuah elemen.

Secara default, gambar latar ditempatkan di sudut kiri atas elemen, dan diulang baik secara vertikal maupun horizontal.

Tip: Latar belakang elemen adalah ukuran total elemen, termasuk padding dan border (tetapi bukan margin).

Tip: Selalu atur warna latar yang akan digunakan jika gambar tidak tersedia.

Note: Pastikan gambar dalam satu folder atau path file gambar sudah benar, agar bisa muncul 

<!DOCTYPE html>
<html>
<head>
<style>
body  {
  background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Gambar background HTML CSSS</h1>

<p>Hello World!</p>

</body>
</html>

Properti yang kita gunakan adalah :  background-image: url("paper.gif"); dan gambar bisa berupa gif, png, jpg atau jpeg.

Maka hasilnya akan seprti ini ketika di buka di browser





Untuk gambar dengan URL luar seperti ini :

<!DOCTYPE html>

<html>

<head>

<style>

body  {

  background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg");

}

</style>

</head>

<body>

<h1>Gambar background HTML CSS</h1>

<p>Hello World!</p>

</body>

</html>

Jika anda ingin menggunakan gambar luar anda bisa membuatnya seperti ini :   background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg");

Hasilnya akan seperti gambar di bawah ini :



Ok sekian semoga dapat bermanfaat tutorial HTML mengganti background warna dan background gambar pada HTML, sekian dan terimakasih.