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

Tweet

Artikel Terkait: