Cara Membuat Latar Belakang Web Menggunakan Gambar dengan CSS

Cara Membuat Latar Belakang Web Menggunakan Gambar dengan CSS - Membuat latar belakang atau background web  menggunakan gambar dapat dilakukan denganmengatur style css. Beberapa hal yang perlu diatur adalah element html kemudian mengatur background-size sebagai cover. Informasi yang ada pada web juga dapat kita atur dengan sesuai dengan yang diinginkan, seperti gambar dibawah ini.

Untuk membuat seperti gambar diatas sangatlah mudah, kita hanya perlu mengatur gambar sebagai background secara penuh tampa ada ruang putih dengan background-size : cover. Untuk penampilan teks dapat kita atur dengan membuat kolom. Untuk pembuatan kolom teks kita dapat mengatur margin, padding dan background color. Berikut ini adalah script untuk membuat web dengan latar belakang gambar.

• buatlah file html dengan menggunakan script dibawah ini

<div id="page-wrap">
<h2>Cantiknya Sunset di Pantai Binangun</h2>
<p>
Harus dikunjungi
</p>
</div>

• Tambahkan style css dibawah ini.

html{
background: url(image/pantai_binangun.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
p{
font: 15px serif;
margin: 0 0 30px 0;
text-indent: 40px;
}
#page-wrap{
width: 400px;
margin: 50px auto;
padding: 20px;
background: whitesmoke;
-moz-box-shadow: 0 0 20px orange;
-webkit-box-shadow: 0 0 20px orange;
box-shadow: 0 0 20px orange;
}

File untuk membuat latar belakang dengan image dapat diunduh diisini.

Cukup sekian postingan dari saya tentang Cara Membuat Latar Belakang Web Menggunakan Gambar dengan CSS. Semoga bermanfaat dan terima kasih.

Cara Membuat Latar Belakang Web Menggunakan Gambar dengan CSS 2015-05-29T13:42:00+07:00 Rating: 4.5 Diposkan Oleh: Unknown