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

Mengubah warna background


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>

Cara mengubah background



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>

mengubah background dengan gambar


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>

mengubah background image no repeat
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>

mengubah backgroung image position

Value "top right" berarti memindahkan posisi gambar keatas kanan. Anda bisa mencobanya dengan memindahkannya keposisi yang lain.

Secara default posisi pada sebuah halaman web adalah pada pojok kiri atas.

Anda bisa menggunakan properti "background-attachment: fixed;" untuk membuat posisi gambar tetap pada posisinya ketika di scroll.
Previous
Next Post »