Iklan bawah header

Belajar CSS : Mengubah Background dengan CSS

Background atau latar belakang dalam sebuah website merupakan salah satu bagian yang penting di dalam men-design website agar halaman website yang dihasilkan terlihat lebih menarik dan modern, ada beberapa cara yang bisa kita gunakan dalam membuat background atau latar belakang.

Pada tutorial kali ini kita akan belajar untuk mengubah gambar menjadi background dan memberikan warna pada background dengan CSS. Untuk mengubah background dengan CSS, kita akan menggunakan property background pada CSS.

Mengubah Warna Background dengan CSS

Sebelum kita memulai praktek untuk mengubah background dengan CSS, terlebih dahulu kita buat file html dan file css nya. Untuk nama dari masing-masing file nya terserah kalian, tetapi disini saya akan membuat file nya dengan nama index.html dan style.css

oke, selanjutnya tinggal kita praktekan langsung, untuk file index.html buatlah kode seperti berikut.


<!DOCTYPE html>
<html>
<head>
<title>Mengubah Warna Background dengan CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Belajar Mengubah Warna Background dengan CSS</h1>
</body&t;
</html>

Selanjutnya buatlah kode pada file style.css seperti di bawah ini.


body{
	background: blue;
	color: white;
}

Setelah itu jalankan file nya di browser, hasil tampilan dari kode diatas sebagai berikut.

backgroundcss

Seperti yang kalian lihat, kita sudah mengubah background dengan warna biru, dimana pada property background: blue untuk memberikan warna biru pada background, dan color: white; untuk memberikan warna putih pada teks. Kalian bisa mencoba berbagai warna background dengan menuliskan warna yang kalian inginkan pada property background.

Mengubah Gambar Menjadi Background atau Latar Belakang Halaman Web

Selanjutnya kita akan belajar cara menyisipkan gambar pada background. Langkah pertama yang harus kita lakukan adalah menyiapkan gambar yang akan digunakan sebagai background, setelah itu letakan gambar satu folder dengan file css yang sudah kita buat.

Tuliskan kode berikut pada file index.html


<!DOCTYPE html>
<html>
<head>
<title>Mengubah Gambar menjadi Background</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Belajar Menyisipkan Gambar pada Background dengan CSS</h1>
</body&t;
</html>

Kemudian tuliskan kode berikut pada file style.css


body {
background: url('gambarbackground.jpg');
color: black;
}

Pada property background: url('gambarbackground.jpg'); nama file dan tipe gambar harus disesuaikan dengan gambar yang kita punya, dan pada property color: black; untuk membuat warna teks menjadi hitam.

Demikian tutorial singkat cara Merubah Background dengan CSS, semoga bermanfaat.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel