Background Image Gradient

Yoih bro ! dalam ngedesain leot web atawa blog ada dua macam background yang sering kita gunakan yaitu mengunakan color/warna atau mengunakan sebuah gambar. Mengunakan warna saja memberikan ke untungan tampilan sebuah blog akan mudah di baca oleh browser, Sedangkan mengunakan gambar ke untungan-nya akan memberikan sentuhan ke indahan pada tampilan leot na. cuman masalahnya kalau tidak memperhatikan ukuran gambar akan mempengaruhi proses loding di browser.

Namun jangan kecil hati, hanya dengan sedikit trik mengunakan Css kita bisa me-repeat gambar yang kecil menjadi lebih besar dari ukuran sebenarnya, terutama sekali ini akan sangat bermangfaat untuk gambar bergradasi seperti di bawah.

Gambar di atas contoh background gradasi ukuran-nya 1024 X 900. Kalau ane paksain pake Background gambar segede gitu upss mungkin subuh di buka leot na magrib baru tampil.. heuheuheu hereuy euy !!!....... Namun dengan sedikit trik dengan cara di edit di photoshop dan mengunakan kode Css repeat-image maka hasil na lihat Demo.

Yup langkah pertama kita sama-sama belajar dari awal cara membuat dan mengedit gambarnya di program adobe photoshop dulu.

Buka Photoshop na buat New doc ukuran wight 500 height 800. ok
1.Set palet warnanya secara berbeda. 2.kemudian pilih tool gradient 3.dan lihat di bar option-nya pada pilihan Linear Gradient.
Kemudian dengan tool gradient Drag dari atas ke bawah.
1. Pilih Marquee Tool —Singel Column Marquee Tool, 2.kemudian klik di area Gambar. 3.dan buka — Menu Image pilih — Crop.
Kemudian buka File — Save For Web — dan simpan dalam format PNG ( misal Bg.PNG.)dengan color 256 biar bagus tampilan na.
Tugas kita di photoshop selesai, kemudian upload atau simpan bg.png tadi di tempat penyedia penyimpanan gambar. misal di simpan di www.photobucket atau biasanya untuk model gambar seperti ini saya suka menyimpannya di www.googlepages.
Setelah itu baru kita membuka dan meredesain template kita. adapaun caranya, karena ini untuk gambar background cari sintaks Body di kode Css template kita. misal : body { background: $bgcolor; font: 75%/150% "Trebuchet MS", Tahoma, Arial; color: $textocolor; margin: 0px; padding: 0px; } Kemudian di sintaks background-nya tambahkan alamat gambar yg telah kita simpan tadi. — Background: $bgcolor url ('http://googlepages.bg.png') repeat-x atau repeat-y; - tulisan warna merah itu alamat gambar .
- Repeat-X : Me-repeat image dengan posisi horizontal
- Repeat-Y: Me-repeat image dengan posisi Vertikal contoh-nya jadi begini :
body { background: $bgcolor url ('http://googlepages.bg.png') repeat-x ; font: 75%/150% "Trebuchet MS", Tahoma, Arial; color: $textocolor; margin: 0px; padding: 0px; }