Pengaturan Resolusi Background

 
Setelah beberapa lama mencoba mengatur background, tadinya sempat merasa berhasil karena telah mengaturnya dengan tepat dan baik, akan tetapi ketika suatu background pada suatu blog dihadapkan pada suatu resolusi yang berbeda, ternyata dapat mempengaruhinya.

Misalnya:

Anda menggunakan mode repeat scroll top center dan background-width:100%

dan anda memiliki resolusi background layar anda dengan 1024*768 maka backround ada akan pas bila resolusi monitor yang anda pakai 1024*768

 

dan apabila resolusi layar kita rubah menjadi 1280*800 akan memberikan efek gambar yang kurang baik dan memjadi melebar kesamping pada background blog dan mungkin gambar terlihat tidak sesempurna sebelumnya.

lalu bagaimana agar kita mendapatkan kualitas gambar yang baik dengan resolusi layar yang berbeda?

Disini kita kita bisa menggunakan mode repeat-y fixed top center

Tetapi akan memberikan sebuah raung kosong bila kita menggunkan kualitas gambar yang sama dengan sebelumnya.

Disini kita dapat menggunakan sesolusi gambar 1280*800 kemudian tambahkan perintah dibawah ini untuk memperbaikinya:

repeat-y scroll 0 0;
min-height: 768px;
min-width: 1024px;
max-height: 800px;
max-width: 1280px;

background-width:100%

bagai mana cara menggunakanya?

Masuk kedalam Template -> Edit HTML kemudian tekan CTRL+F pada browser, kemudian cari kode body {

Lalu ganti scrip background dengan:  

background: "kode warna background" url("link gambar") repeat-y scroll 0 0;

Dan Tambahkan:

min-height: 768px;
min-width: 1024px;
max-height: 800px;
max-width: 1280px;
background-weight:100%

Sehingga terlihat seperti ini:

body{
background: "kode warna background" url("link gambar") repeat-y scroll 0 0;
min-height: 700px;
min-width: 1024px;
max-height: 700px;
max-width: 1280px;
background-weight:100%
}

Jangan lupa juga untuk menambah ini pada bagian main-wrapper dan sidebar-wrapper

main-wapper

float: $startSide; 
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

 sidebar-wapper

float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */