Cara memberi warna dan gambar latar belakang atau background menggunakan CSS

CSS dapat digunakan untuk mendefinisikan efek yangterjadi pada latar belakang dengan elemennya. CSS properti yang digunakan untuk mengatur efek latarbelakang adalah :

background-color
background-image
background-repeat
background-attachment
background-position

Menentukan Warna Latar Belakang
background-color ini digunakan untuk menentukan elemen warna latar belakang sebuah website, contoh :

<head>
<style type="text/css">
  body{
    background-color:#0000FF;
  }
</style>
</head>
<body>
<h1>Cara menentukan warna latar belakang</h1>
<p>selamat datang di website</p>
</body>

Hasilnya :

Cara menentukan warna latar belakang

selamat datang di website

Ada beberapa cara untuk melakukan menentukan warna dalam CSS yaitu :

Dengan Nilai Hexadesimal = "#0000FF"
Dengan Nilai RGB = "rgb(0,0,255)"
Dengan Nama warna = "Blue"

kalian bisa melihat kode hexadesimal dan nama warna untuk lebih lengkapnya

Menentukan Gambar Latar Belakang
background-image ini digunakan untuk menentukan gambar latar belakang sebuah website, contoh :

<head>
<style type="text/css">
  body{
    background-image:url('contoh.jpg');
  }
</style>
<body>
<h1>Cara menentukan gambar latar belakang</h1>
<p>lihatlah hasil gambar latar belakangnya</p>
</body>

Hasilnya :

Cara menentukan gambar latar belakang

lihatlah hasil gambar latar belakangnya

Menentukan Gambar Latar Belakang yang di ulang atau tidak
background-repeat ini digunakan untuk menentukan latar belakang akan di ulang atau tidak.
jika ingin latar belakang di ulang, contoh :

body{
  background-image:url('contoh.jpg');
  background-repeat:repeat-x; //mengulang gambar pada bagian horizontal
}

Jika ingin latar belakang tidak di ulang, contoh :

body{
  background-image:url('contoh.jpg');
  background-repeat:no-repeat; //gambar tidak diulang
}

Menetapkan posisi latar belakang
background-position ini digunakan untuk menetapkan posisi latar belakang, contoh :

<head>
<style type="text/css">
  body{
    background-image:url('contoh.jpg');
    background-repeat:no-repeat;
    background-position:right top;
  }
</style>
<body>
<h1>Cara menentukan gambar latar belakang</h1>
<p>lihatlah gambar latar belakang yang tak diulang dan ditampilkan tetap pada posisi</p>
</body>

Hasilnya :

Cara menentukan gambar latar belakang

lihatlah gambar latar belakang yang tak diulang dan ditampilkan tetap pada posisi

Cara memberi warna dan gambar latar belakang atau background menggunakan CSS

Cara menentukan warna latar belakang

Cara menentukan gambar latar belakang

Cara menentukan gambar latar belakang

2 komentar:

Recent

Comments

Blog Archive