Membuat Gambar Full Background Page
Kemaren pagi siang ada masuk ke chat YM seorang teman tanya tentang bagaimana caranya gambar dijadikan full background dihalaman website, setalah bertapa beberapa tahun di gunung dan melalui riset yang panjang hahaha.. akhirnya saya pun coba-coba.
Oke saya mulai, pertama kita akan membuat gambar dibawah ini sebagai backgroundnya : 500 x 338 pixel
Struktur kode HTML sebagai berikut :
1
2
3
4
5
6
7
8
| <html ><head> <title><!-- Insert your title here --></title></head><body> <img src="gambarku.jpg" alt="gambar" class="bg" /></body></html> |
dan untuk code CSSnya seperti ini:
1
2
3
4
5
6
7
8
9
10
11
12
13
| 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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <html ><head> <title><!-- Insert your title here --></title></head><body> <img src="gambarku.jpg" alt="gambar" class="bg" /> <!-- tambahan content --> <div class="content"> <p>I am currently working on finding a way to better work around moving meta boxes into the right hand column. Currently doing so will still give it the behavior of being a tabbed content area until you reload the edit page. IE: It will still show / hide the content and the tab will still appear in the menu as well. Any suggestions on the logic / behavior would be greatly appreciated as I am somewhat stumped at this point.</p> <p>This simple plugin is designed primarily for sites that are using WordPress as a content management system, however it can be extremely useful for both. If you are using a more complex WordPress install and theme you are likely to end up with a long list of dialog boxes on the edit pages to manage the different elements of your site. This can be a usability problem for two reasons, one being that a client may not know they have control over an element because it will be hidden way down the page. Additionally you can get to a point where you have to scroll way down and up to make changes and then publish the site.</p> </div></body></html> |
Disitu saya menambahkan DIV baru yaitu class=content
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| 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;} |
Hasilnya akan seperti ini :
Nah! Sekarang sudah selesai. Kalau ada pertanyaan jangan sungkan untuk bertanya 
Update Resource
Ini ada teknik yang membuat gambar lebih presisi ketika browser di resize, teknik ini menggunakan jQuery http://outstando.com/teknik-jquery-untuk-full-page-background-yang-dapat-ter-resize-secara-otomatis/
Guvenilir ve ucuz fiyatlara paykasa kart alabileceginiz sisteminiz.
No comments:
Write comments