CSS / Posted 4 years ago / 15 Komentar
cssfullbg1

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 :

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/

Tags

ukuran background website,background gambar html,membuat website dengan jquery,background untuk wordpress,ukuran background web,cara membuat website dengan jquery,cara mengatur ukuran background html,membuat background web full,ukuran background html,membuat theme wordpress dengan photoshop,tutorial membuat web dengan jquery,membuat background gambar di html,membuat background website,html background gambar,gambar background html,membuat background blog full,membuat background image html,ukuran untuk background website,web full jquery,membuat background full Tags: , , ,
cToko Toko Online

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

http://www.zulsdesign.com


15 Comments

  1. Posted October 14, 2010 at 7:04 am | Permalink

    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.

    • Posted October 14, 2010 at 7:28 am | Permalink

      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. Posted October 14, 2010 at 3:11 pm | Permalink

    Great post! STICK WITH IT!

  3. Posted January 25, 2011 at 6:45 am | Permalink

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

  4. andarmuda
    Posted February 3, 2011 at 12:28 am | Permalink

    Demo not work properly.

  5. Posted February 20, 2011 at 10:12 am | Permalink

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

    • Posted February 20, 2011 at 10:58 am | Permalink

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

  6. Posted March 26, 2011 at 6:25 am | Permalink

    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%;
    }

  7. Posted December 27, 2011 at 10:14 am | Permalink

    makasih banget mas admin,,artikel ini da lama aq cari buat belajar web,,,akhirnya nemu juga,,,matur nuwun..Good content :-)

  8. Posted January 4, 2012 at 4:20 pm | Permalink

    maaf mau tanya,
    di class .content ama .bg ada syntax z-index
    itu fungsinya buat apa ya mas?
    makasih.. :)

  9. kampayputra
    Posted April 18, 2012 at 11:53 am | Permalink

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

  10. Posted November 28, 2012 at 2:21 pm | Permalink

    kalo backgroundnya jadi slideshow gimana yah ? jadi fullscreen gitu :)
    tolong adakan juga tutorialnya yah master :D

  11. melinjo
    Posted March 26, 2013 at 1:56 pm | Permalink

    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

  12. Posted May 30, 2013 at 6:09 pm | Permalink

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

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

webdesign