Tutorial CSS - Mengubah Background

Cara Mengubah Background

Background Color

Background color digunakan untuk mengubah warna background pada elemen HTML.

Sebagai contoh, anda dapat mengubah warna background pada bagian body dengan kode berikut:


body{
    background-color: red;
}

Contoh lain


<h1 style="background-color: hotpink;">
  Tutorial CSS Mengubah Warna background
</h1>

<p style="background-color:#f2df2d;">
  Tutorial CSS Mengubah Warna background
</p>

<div style="background-color:rgb(39, 188, 221);">
  Tutorial CSS Mengubah Warna background
</div>

Background Image

Selain dengan warna anda juga dapat menggunakan gambar sebagai background. Gambar yang digunakan bisa menggunakan gambar dengan format JPG, PNG atau GIF.

Contoh


<!DOCTYPE html>
<html>
  <head>
    <title>Background CSS</title>
  </head>
  <body style="background-image:url('gambar1.png');">

  </body>
</html>

Value "url" adalah nama atau alamat dari file gambar yang akan digunakan.
Pada contoh tersebut saya langsung memanggil nama filenya karena file gambar saya simpan satu folder dengan file HTML.

Secara default gambar akan ditampilkan berulang. Walaupun gambar yang dipakai berukuran kecil maka akan ditampilkan satu halaman penuh.

Jika anda menampilkan gambar satu kali, anda bisa menambahkan properti "background-repeat: no-repeat".

Contoh


<!DOCTYPE html>
<html>
  <head>
    <title>Background CSS</title>
    <style>
      body{
        background-image:url('gambar1.png');
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>

  </body>
</html>

Untuk memindahkan posisi gambar anda bisa menggunakan properti "background-position".

Contoh


<!DOCTYPE html>
<html>
  <head>
    <title>Background CSS</title>
    <style>
      body{
        background-image:url('gambar1.png');
        background-repeat: no-repeat;
        background-position: top right;
      }
    </style>
  </head>
  <body>

  </body>
</html>