CSS : Mengubah Background dengan CSS

MENGUBAH BACKGROUND DENGAN CSS
Background atau Latar Belakang pada website merupakan bagian yang wajib diperhatikan untuk membuat sebuah website yang menarik dan modern. Ada beberapa cara dalam mempercantik Background pada sebuah website. Yaitu dengan menggunakan background yang berupa gambar dan menggunakan background yang berupa warna dengan bantuan CSS. Property Background selian bisa merubah body halaman website bisa juga untuk merubah background pada elemen HTML.

CARA MENGUBAH BACKGROUND DENGAN CSS
Pada tutorial kali ini akan dijelaskan bagaimana cara merubah Background menggunakan CSS. Pertama siapkan dulu file htmlnya namai terserah sobat disini saya menamainya index.html dan buatlah file css disini saya menaiamnya style.css

MERUBAH WARNA BACKGROUND
Berikut ini saya akan berikan contoh cara merubah background dengan warna menggunakan CSS :

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Merubah Warna Background</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <center>
    <h1>Tutorial mengubah warna background dengan CSS</h1>
    </center>
</body>
</html>

Style.css

body{
background-color: grey;
color: yellow;
}


Dalam satu folder

Hasil run script

Untuk merubah warna background saya gunakan " background-color: grey" jadi saya rubah backgroundya dengan warna oabu-abu, dan "color: yellow" adalah untuk merubah warna fontnya menjadi warna putih

MENGUBAH BACKGROUND DENGAN GAMBAR
OK Sekarang akan saya jelaskan bagaimana cara mengubah background sebuah website dengan menggunakan gambar. Pertama sobat harus menyediakan file gambar untuk dijadikan gambar pada website sobat. Disini saya sudah menyediakan gambar untuk saya jadikan background dan saya letakkan satu folder dengan file kerja saya agar tidak kebingungan nantinya. Nama file gambar saya adalah background.jpg

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Merubah Background</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <center>
    <h1>Tutorial mengubah gambar background dengan CSS</h1>
    </center>
</body>
</html>

style.css

body{
background: url(background.jpg);
color: white;
}

Jadikan satu folder

Untuk menampilkan gambar ada background dalam css , menggunakan tag :

background url:(namagambar.extensi);

Background berhasil dirubah, jika nama file gambar kawan bukan "background.jpg" maka rubah saja sesuai dengan nama file gambar kawan. Contoh nama file gambar sobat adalah bg1.png maka kode syntaxnya " background: url(bg1.png) " . Satu lagi usahakan file gambar satu folder dengan file kerja sobat agar tidak susah untuk menulis lokasi gambarnya

PENUTUP
Jadi kode syntax untuk merubah background dengan CSS adalah " background: " mudah bukan ? Memang dalam menampilkan gambar di background ini termasuk kategori yanh lumayan mudah. Sekian dulu post dari saya kali ini , sekian dan Terima kasih.

REFERENSI : www.malasngoding.com