sumber : https://belajarwebdesign.com/css/membuat-gambar-full-background-page/
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 :
Komentar Terbaru