Teknik jQuery untuk full-page background yang dapat ter-resize secara otomatis

Written by Fikri Rasyid

Bagaimana caranya agar image dapat digunakan sebagai background desain web dan dapat “fluid” atau berubah ukurannya sesuai dengan ukuran layar yang berbeda-beda tanpa mengorbankan rasio gambar?

Di beberapa project lalu saya mendapati kebutuhan untuk menjawab pertanyaan diatas. Menggunakan CSS SAJA sudah barang tentu tidak memungkinkan kecuali mengambil resiko mengorbankan rasio gambar dan membuat gambar menjadi peyang (berdasarkan beberapa teknik yang dijelaskan Chris Coyier di tulisan ini).

Jadi saya googling beberapa saat dan menemukan tutorial yang sangat keren dari Grow Media tentang teknik auto-resizable background dengan menggunakan jQuery yang dapat anda temukan di halaman ini:

Resizable full-browser background image with jQuery (preserving aspect ratio)

Bagaimana cara kerjanya?

Untuk detail penjelasannya anda bisa baca di link yang saya berikan diatas – saya rasa tidak perlu saya tuliskan lagi disini. Tapi pada dasarnya, yang dilakukan oleh teknik tersebut adalah :

  1. Buat kontainer untuk konten. Berikan position: relative dan z-index:10.
  2. Buat kontainer untuk gambar. Berikan position: fixed dan pastikan z-index-nya berada di bawah kontainer untuk konten
  3. Letakkan gambar di dalam kontainer untuk gambar, lalu berikan position:absolute, width & height 100% dan z-index:0
  4. Konfigurasi diatas membuat gambar akan selalu berada di dalam kontainer yang sudah “fixed”. Sekarang yang harus dilakukan adalah membuat kontainer tersebut seukuran dengan tinggi dan lebar layar browser dan memposisikan serta me-resize gambar dengan patokan ukuran browser. Hal ini dilakukan dengan jQuery

Yang harus anda ketahui

Sementara hal-hal yang prinsipal dan esensial dapat anda temukan di link diatas yang saya berikan, berdasarkan pengalaman saya, ada beberapa hal yang kemudian sebaiknya anda ketahui:

  1. Ukuran gambar yang paling ideal untuk teknik ini adalah 1440 X 900 piksel. Di tutorial yang ditulis oleh Grow Media tidak disebutkan mengenai hal ini sih, bahkan di kolom komentarnya ada yang memilih menggunakan beberapa API jQuery untuk mendapatkan width & height gambar secara otomatis. Namun sepengujian saya, gambar dengan rasio 1440 X 900 piksel yang bekerja paling baik dengan berbagai pengalihan-ukuran.
  2. Teknik ini berjalan dengan jQuery versi 1.3.2. Saya belum mengerti mengapa versi 1.4.2 tidak bisa menjalankannya dengan baik. Any ideas?
  3. Teknik ini kurang prima di Internet Explorer versi 6. Saya sih tidak begitu perduli dengan browser kuno ini untuk project-project pribadi saya, namun untuk produksi project komersial mungkin jadi masalah ya :p

Wanna see it in action?

Anda bisa lihat di halaman demo teknik ini. Langsung view source saja, saya sudah sederhanakan agar source code-nya dapat dipelajari secara langsung dengan mudah.

Anda juga bisa lihat teknik ini berjalan di blog saya atau situsnya thinking*room :)

The snippets

Just in case anda butuh snippetnya langsung, ini saya sertakan disini. Untuk penjelasan step-by-step-nya anda bisa dapati di link ke situsnya Grow Media – pihak yang menciptakan teknik ini – yang  telah saya berikan diatas. Saya hanya membantu menyebarkan teknik ini saja :)

Struktur HTML

<div id="wrapper">
</div><!-- /#wrapper -->
<div id="supersize">
<img src="google-fullscreen.jpg" />
</div>

CSS

#supersize            {position:fixed;}
#supersize img        {height:100%; position:absolute; width:100%; z-index:0;}
#wrapper            {position:relative;z-index:10; float:left; width:100%;}

Fungsi jQuery

<script type="text/javascript">

(function($){
//Resize image on ready or resize
$.fn.supersize = function() {
//Invoke the resizenow() function on document ready
$(document).ready(function() {
$('#supersize').resizenow();
});
//Invoke the resizenow() function on browser resize
$(window).bind("resize", function() {
$('#supersize').resizenow();
});
};
//Adjust image size
$.fn.resizenow = function() {
//Define starting width and height values for the original image
var startwidth = 1440;
var startheight = 900;
//Define image ratio
var ratio = startheight/startwidth;
//Gather browser dimensions
var browserwidth = $(window).width();
var browserheight = $(window).height();
//Resize image to proper ratio
if ((browserheight/browserwidth) > ratio) {
$(this).height(browserheight);
$(this).width(browserheight / ratio);
$(this).children().height(browserheight);
$(this).children().width(browserheight / ratio);
} else {
$(this).width(browserwidth);
$(this).height(browserwidth * ratio);
$(this).children().width(browserwidth);
$(this).children().height(browserwidth * ratio);
}
//Make sure the image stays center in the window
$(this).children().css('left', (browserwidth - $(this).width())/2);
$(this).children().css('top', (browserheight - $(this).height())/2);
};
})(jQuery);

$(document).ready(function() {
$("div#supersize").supersize();
});
</script>

Ada komentar dan masukan? Mari berdiskusi :D

P.S.

Terima kasih bayak untuk Grow Media yang menciptakan dan berbagi teknik ini. It really helps us! :D

About The Author

Fikri Rasyid - I speak HTML + CSS + jQuery, breath in world wide WordPress-land, co-founded WPNest and currently pursuing my bachelor degree majoring English Education at Indonesia University of Education. Google my name for more information about me.

Connect & Subscribe

Keep in touch and get my latest content trough:

Categories

Post Info

9 Responses for This Thought

  1. Jauhari

    26 September 2010

    Mantap…. Tutorialnya

    Reply
  2. Fitri PMRELOAD

    27 November 2010

    jos gandhos tenan!
    keep berbagi!

    Reply
  3. Desmos

    14 December 2010

    Nice Tutorial, keep it.. :)

    Reply
  4. wong ndeso

    29 December 2010

    keren mas tipsnya… :)

    Reply
  5. Nando Tampubolon

    07 June 2011

    bisa diaplikasikan ke blog jg gak ya ? *blogger*

    Reply
  6. logousaha

    09 July 2012

    Istimewa tutorialnyah!

    Reply

Leave a Reply

Your email address will not be published. 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>