Kukuh Cakra Darma

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



Artikel Terkait:

11 Comments:

Kisah Abu Nawas | 01 December, 2010 20:29 | [Reply]

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

Kisah Abu Nawas | 01 December, 2010 20:30 | [Reply]

aku ingin melihat demonya dahulu sob

Kisah Abu Nawas | 01 December, 2010 20:31 | [Reply]

ini akan menambah berat blog tidak sob ya?

Kisah Abu Nawas | 01 December, 2010 20:32 | [Reply]

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

Kisah Abu Nawas | 01 December, 2010 20:33 | [Reply]

budaya komentar sudah dilaksanakan sob
always selalu diusahakan balas komen

Kukuh Cakra Darma | 01 December, 2010 21:02 | [Reply]

@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.

MAX MEIRO | 01 December, 2010 22:16 | [Reply]

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

Iwona | 01 December, 2010 23:35 | [Reply]

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

I L H A M | 02 December, 2010 13:33 | [Reply]

sob,, tukeran link ya ni link saya www.ilhamz.co.tv,,jika telah ditambahkan kunjungi web saya dan tulis di buku tamu link anda telah di tambahkan,,,okay ditunggu ya ^_^

stroomz | 27 January, 2011 00:50 | [Reply]

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

Fitri Defi | 15 January, 2013 12:08 | [Reply]

What a great code!
thank you very much

Post a Comment | Classic Comment's Form