Kamis, 06 Oktober 2016

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

Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)