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 :

<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:

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><!-- 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

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 :

Baca Juga:  Percantik Form Pencarian dengan CSS

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/

Komentar

comments

zulsdesign

Seorang Web Designer, Web Developer, Wordpress Development dan independen Blogger. Spesialisasi Personal Branding. Selalu haus akan ilmu tentang perkembangan dunia Web Design, Social Media, Online Marketing. Kadang-kadang juga berprofesi sebagai konsultan Website dadakan :)

15 Responses

  1. Fansi says:

    Terimakasih artikelnya. Yang jadi pertanyaan saya, gimana kalo web ini dibuka di layar monitor yg resolusinya beda2? Apa gambar background yg sudah disetting ini akan tetep mengikuti panjang dan lebar monitor/browser? Berarti kalo gambarnya kecil, nanti jadinya burem gitu dong.

    Oh, ya, kalo ada contoh live preview, share dong, biar bisa ngeliat langsung. Hehe. Thanks.

    • zulsdesign says:

      Gambarnya tetap akan mengikuti, nah untuk ukuran itu harus dikira-kira dulu, sebaiknya sih gunakan gambar yang hampir mendekati ukuran layar, lihat kebutuhan juga.

      Preview sudah disediakan πŸ™‚

  2. Ecy Anboo says:

    Nice article, saya sudah lama cari ni artikel. Makasih buat infonya.

  3. andarmuda says:

    Demo not work properly.

  4. Fikri Rasyid says:

    Minus-nya teknik Full CSS seperti ini adalah gambar-nya menjadi fixed dengan lebar & tinggi layar sehingga jika window diresize, gambar akan tetap mengikuti rasio 100% x 100% sehingga gambarnya menjadi peyang. Jika dibuka di layar smartphone, tentu akan langsung terlihat peyang juga.

    Kalau saya, lebih prefer kombinasi CSS dan jQuery seperti yang saya tulis disini: http://outstando.com/teknik-jquery-untuk-full-page-background-yang-dapat-ter-resize-secara-otomatis/ πŸ™‚

    • zulsdesign says:

      Keren juga nih teknik yang dipakai, Memang kemampuan CSS sangat terbatas untuk manipulasi seperti ini, karena tutorial di post ini menggunakan full CSS. Terima Kasih mas Fikri untuk share teknik menggunakan jQuery ini. keren & jadi gak menceng πŸ˜€

  5. Zahra says:

    Bagaimana jika seperti ini:
    html {
    background: url(backgrond url) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    Aku juga suka sich pakai yang jquery. emm seperti pernah lihat kode ini. Kalo position jadi absolurt bisa ga?
    .bg{
    position:absolute;
    top:25%;
    left:25%;
    right:25%;
    bottom:25%;
    margin:auto;
    min-width:50%;
    min-height:50%;
    }

  6. makasih banget mas admin,,artikel ini da lama aq cari buat belajar web,,,akhirnya nemu juga,,,matur nuwun..Good content πŸ™‚

  7. Zefri Kurnia says:

    maaf mau tanya,
    di class .content ama .bg ada syntax z-index
    itu fungsinya buat apa ya mas?
    makasih..
    πŸ™‚

  8. kampayputra says:

    Gan yang kaga bisa bergerak cuman backgroundnya doangkan ya ?
    tapi contennya bisa bergerakkan ya ?

  9. kalo backgroundnya jadi slideshow gimana yah ? jadi fullscreen gitu πŸ™‚
    tolong adakan juga tutorialnya yah master πŸ˜€

  10. melinjo says:

    mas, numpang nanya, kenapa z-index-nya di set “5” untuk contentnya?
    kenapa kok tidak “2”?
    pdahal z-index 2, 3, dan 4 nya belum ada, knapa kok tiba-tiba langsung di set 5?
    makasih buat jawabannya

  11. DimasMO says:

    min gimana sih gabungin html dan php ke css .ada link tutorial nya gak ??? repply min

Leave a Reply

Your email address will not be published. Required fields are marked *