Cara Membuat Gambar Background Full Page

Waktu itu temen pernah nanya tentang backgroundnya biar full gk tile (yang nyambung nyambung) di halaman site..
setelah googling selama 2rb tahun lamanya, akhirnya ketemu juga yang pas.. :3

oke saya mulai saja... :D
disini saya menggunakan gambar berukuran 960 x 720 px untuk dijadikan background..

bg.jpg

Kode HTMLnya :

<html >

<head>

<title></title>

</head>

<body>

<img src="bg.jpg" alt="gambar" class="bg" />

</body>

</html>

Dan Untuk Code CSSnya seperti ini :

body {

     margin: 0;

     padding: 0;

     text-align: center;

}

.bg {

     width: 100%;

     height: 100%;

     position: fixed;

     z-index: 1;

     float: left;

     left: 0;

}

Terlihat bahwa gambar akan diubah ke ukuran menyesuaikan halaman dengan nilai Width: 100% dan Height:100%.

Selanjutnya saya akan meletakkan text diatas gambar tadi, disini saya akan menambahkan beberapa text di HTMLnya :

<html >

<head>

    <title></title>

</head>

<body>

    <img src="bg.jpg" alt="gambar" class="bg" />

    

    <div class="content">

        <p>I Dont Care What u think about me..</p>

        <p>RPL4rt</p>

        <p>Simple site..</p>

    </div>

</body>

</html>

disitu saya menambahkan div baru.. yaitu class=content

body {

     margin: 0;

     padding: 0;

     text-align: center;

}

.bg {

     width: 100%;

     height: 100%;

     position: fixed;

     z-index: 1;

     float: left;

     left: 0;

}

.content {

     width: 80%;

     height: auto;

     margin: 0 auto;

     position: relative;

     z-index: 5;

     background: #fff;

     padding: 30px;

     text-align: left;

}

cukup mudah bukan (copaser wkwk yang penting sama sama belajar)
untuk hasil akhirnya kurang lebih seperti ini :

<html > <head> <title></title> </head> <body> <style> body { margin: 0; padding: 0; text-align: center; } .bg { width: 100%; height: 100%; position: fixed; z-index: 1; float: left; left: 0; } .content { width: 80%; height: auto; margin: 0 auto; position: relative; z-index: 5; background: #fff; padding: 30px; text-align: left; } </style> <img src="bg.jpg" alt="gambar" class="bg" />  <div class="content"> <p>I Dont Care What u think about me..</p> <p><a href="http://rpl4rt.blogspot.com">RPL4rt</a></p> <p>Simple site..</p> </div> </body> </html>

untuk demo bisa di lihat DISINI
Sekian postingan dari saya..
Semoga membantu untuk belajar CSSnya dan semoga bermanfaat ;)

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Dika, Published at Jumat, Januari 25, 2013 and have 3 komentar

3 komentar:

Dika16 Februari 2013 pukul 00.52
;)
BalasHapus
Balasan
DEIL31 Mei 2013 pukul 10.14
kalau mau menggunakan gambar yang ada di laptop aku gimana caranya gan ?
ini email Ane jimsan97@gmail.com
BalasHapus
Balasan
Anonim5 Maret 2014 pukul 05.29
Trimakasihh.....
sagat membantu :))
BalasHapus
Balasan

Tambahkan komentar

Komentar yang tidak baik akan dihapus :*

Curat Coret Blog