Membuat Full Page Background Website dengan HTML dan CSS

Update Terakhir pada

Assalamualaikum Wr. Wb

Sahabat Webhozz dimanapun berada, apa kabarnya??? Mudah-mudahan sehat selalu dan selalu bahagia ya, amin. To the point aja, ya…

Alhamdulillah kali ini kita akan belajar membuat background website full satu halaman. Jadi, di halaman website yang kita buat akan penuh dengan gambar di latar belakangnya.

Oke, langsung aja kita mulai ya…

1. Buat file HTML baru, dan siapkan satu buah gambar. Sangat disarankan gambarnya dengan format landscape. Karena mengikuti format web browsernya.

2. Pastikan file HTML dan file Gambar tersebut dalam satu folder project.

3. Ketikkan kode HTML pada umumnya pada file HTML tersebut.

//===================kode disini===========================
<!DOCTYPE html>
<html>
<head>
	<title>Webhozz Blog</title>
</head>
<body>

	<h2>Membuat Background Full satu halaman</h2>

</body>
</html>
//=========================================================

4. Ketikkan beberapa kode CSS pada tag . Berikut kodenya:

//=======================================kode disini======
<style>
/*untuk teks heading di tag <body>*/
h2
{
	background-color: white;
	color: crimson;
	font-family: sans-serif;
	text-align: center;
	width: 45%;
	margin:auto;
	padding: 20px;
}

body
{
	background-image: url('Chrysanthemum.jpg');
	background-repeat: no-repeat;
	background-size: cover;
}
</style>
//========================================================

5. Dan berikut ini, adalah kode lengkapnya.

//==========================================kode disini===
<!DOCTYPE html>
<html>
<head>
	<title>Webhozz Blog</title>
	<style>
		/*untuk teks heading di tag <body>*/
		h2
		{
			background-color: white;
			color: crimson;
			font-family: sans-serif;
			text-align: center;
			width: 45%;
			margin:auto;
			padding: 20px;
		}

		body
		{
			background-image: url('Chrysanthemum.jpg');
			background-repeat: no-repeat;
			background-size: cover;
		}
	</style>
</head>
<body>

	<h2>Membuat Background Full satu halaman</h2>

</body>
</html>
//========================================================

6. Maka di browser, akan tampil seperti ini.

Dan begitulah caranya. Adapun beberapa penjelasan mengenai kode tersebut adalah sebagai berikut.

-background-image: url(‘Chrysanthemum.jpg’);
–> memanggil file gambar, di tutorial ini nama file gambarnya “Chrysanthemum.jpg”.
-background-repeat: no-repeat;
–> supaya gambar backroundnya tidak mengalami pengulangan jika gambarnya kecil.
-background-size: cover;
–> supaya file gambarnya full satu halaman.

Alhamdulillah, demikianlah postingan artikel kali ini. Selamat mencoba ya.

Akhir kata, semoga bermanfaat ya buat sahabat Webhozz semuanya. Amin.

Wassalamualaikum Wr. Wb.