Friday, June 28, 2013

tutorial : Perfect Full Page Background Image (CSS Tricks)



holla ! korang mesti selalu kaan tengok blog Crafty Nieya selalu bertukar background ? and nieya just guna CSS code untuk ubah background . nieya ambik gambar full hd 1080p wallpaper kat pacik google sebab gambar tak mudah pecah . so, dah lame praktis gune dalam blog, baru hari ni ade mood nak buat tutorial . nieya jumpa tuto ni kat google . sebab dah lama nak cari code untuk background untuk full page satu website . jumpa punn ..




The goal here is a background image on a website that covers the entire browser window at all times. Let's put some specifics on it:
  • Fills entire page with image, no white space
  • Scales image as needed
  • Retains image proportions (aspect ratio)
  • Image is centered on page
  • Does not cause scrollbars
  • As cross-browser compatible as possible
  • Isn't some fancy shenanigans like Flash

so, first of all :


1. korang cari gambar yang korang berkenan kat pacik google ke hape . pastikan gambar tak pecah okay . nanti background nampak buruk . kalau tak nak gambar pecah @ dithering image, cari sekali image yang 'full hd' @ '1080p' . thanks to Zakwan Buntalsubtype sebab ajar macam mana nak cari gambar tak pecah ..

2. copy code ni -> html {
background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover
} 
and paste kan ke -> template > customize > advanced > add CSS . paste kat ruangan kosong di situ .

3. tukarkan code yang berwarna merah kepada URL gambar yang korang cari tadi .

4. preview, if there is no error, then you can click apply to blog :')


Works in:
  • Safari 3+
  • Chrome Whatever+
  • IE 9+
  • Opera 10+ (Opera 9.5 supported background-size but not the keywords)
  • Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

---------------------------------------------------


waahhhh . veghy easy, yu noe . ai pun boleh main aci selamba je tukar-tukar background blog every week kalau rajin . khonn . hihiks . maka, terimalah pantun daripada Crafty Nieya,


"dua tiga kucing berlari,
okayh . itu saja" XD
*penanganlawakkeder2*


thanks coz reading this tutorial ! don't forget to try it, naa :')

xoxo,
Crafty Nieya ..!
Assalamualaikum ..

CLICK DONATE N GET REWARDED ->


Thanks for reading. Do like and leave your comment. Really appreciate that :)

No comments:

Post a Comment

✿ Assalamualaikum, thanks comment here yo ! ✿

This is an Official Blog. Copyright© All Rights Reserved http://craftynieya.blogspot.com