CSS3 | Membuat Background Pada Web Full Page

Yep, kali ini saya akan memposting mengenai "Perfect Full Image Backgrond Page". Yang dimaksud disini adalah cara untuk membuat background pada blog lebih menawan dengan background yang full page.. Sebenarnya cara ini cukup mudah jikalau anda menggunakan CSS3 yang merupakan CSS yang paling baru saat ini, dan yang akan saya bahas disini.
Oke, langsung saja..
1. Login ke blog anda --> Design --> Edit HTML
2. Kode CSS yang harus anda masukkan adalah

background: url(URL BACKGROUND ANDA **) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='URL BACKGROUND ANDA **', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='URL BACKGROUND ANDA **', sizingMethod='scale')";
Filter diatas adalah untuk IE, webkit untuk Google Chrome, moz untuk Firefox, o saya kurang tahu, dan yang tanpa embel embel untuk berbagai browser yang selain browser terkenal.
Sehingga semisal anda ingin memasukkannya sebagai background homepage, maka masukkan kode di atas sehingga kurang lebih menjadi

body{
background: url(URL BACKGROUND ANDA **) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin:0;
color:#444444;
font:small $textbody;
font-size/* */:/**/small;
font-size:/**/small; }
3. Save!

Untuk DEMO silahkan lihat disini
Demo - CSS3 | Membuat Background Pada Web Full Page.
Dan coba lihat berapa ukuran backgroundnya. Dengan cara
*Klik kanan pada background --> View Image.
Ukurannya kurang dari halaman full web bukan? yakni hanya 320px × 240px dari ukuran web normal yang
biasanya ber resolusi 1024px × 768px.
** Akan tetapi, juga disesuaikan agar background tidak pecah, jadi disini adalah hanya memberikan solusi lain yang fix. Anda juga bisa dengan menggunakan background yang melebihi resolusi monitor anda yang mana hasilnya akan lebih bagus dikarenakan ada efek panorama, atau bisa dibilang widescreen.
Apabila anda tidak menggunakan fungsi CSS3 ini, maka biasanya background akan terus di repeat atau diulangi hingga end wrapper atau menyesuaikan resolusi anda.
Bagaimana? Silahkan mencoba dan semoga sukses.. Jangan lupa berikan Komentar, Like dan Share dengan sebagaimana mestinya.. :)

10 comments:

  1. salam sob
    thanks tipsnya..
    btw optionnya gak diperluas ke name url sob?

    ReplyDelete
  2. aku ingin melihat demonya dahulu sob

    ReplyDelete
  3. ini akan menambah berat blog tidak sob ya?

    ReplyDelete
  4. blog yang bercss akan indah
    aku dengar dengan css loading blog akan lebih cepat
    benarkah begitu sob?

    ReplyDelete
  5. budaya komentar sudah dilaksanakan sob
    always selalu diusahakan balas komen

    ReplyDelete
  6. @Kisah Abu Nawas komentarnya sekali tp banyak aja sob.

    ngga gan, ntar bisa penyalahgunaan nama "admin".

    Setau ane sih jelas iya, kan menggunakan gambar, emang kalo pake CSS itu lebih ringan gan.

    ReplyDelete
  7. Tips yang bagus sob...
    meskipun ane masih kurang ngarti tentang css.. hehe masih Supu sih...

    ReplyDelete
  8. Thnx for your visit,our Friend,wishing you a good night and inviting for the next visit.

    ReplyDelete
  9. oke gan, makasi tips'y,, saya ijin coba yak.. ;)

    ReplyDelete
  10. What a great code!
    thank you very much

    ReplyDelete