Saturday, September 20, 2014

Tutorial CSS, Membuat Background Website dengan CSS Image


Apa hal pertama yang Anda pikirkan ketika akan mengatur layout website dengan CSS? Yups benar, Pikiran Anda sama dengan saya *Tanya sendiri, Jawab sendiri :D, Penulis Blog yang aneh :D.
Memberikan Warna / Gambar pada background adalah hal pertama yang saya pikirkan pada pengaturan tag. Untuk pemberian warna pasti pembaca sekalian sudah tahu property background-color bukan? Jadi kita ga perlu bahas detail lagi y, kita langsung pada pemberian gambar untuk background saja. Dalam memberikan bakground gambar kita menggunakan property CSS Image seperti background-image, background-repeat atau background-position jika dibutuhkan.
Ada beberapa teknik pemberian Gambar pada background, ada yang diperbesar selebar browser, ada yang di repeat/diulang berdasarkan sumbu x atau sumbu y
Oke kita buat file HTML dengan methode penyisipan CSS (internal CSS) pada teks Editor. Jangan lupa disimpan dengan nama background-repeat.html ya. Oh y, hampir saya lupa nanti untuk gambarnya bisa di download pada file yang saya sertakan pada link download.
Berikut adalah screenshots image / gambar yang akan kita gunakan untuk latihan, 
Oke langsung saja ketik script berikut :
    

  1. <html>
    2. 

  2. <head>
    3. 

  3. <style>
    4. 

  4.     body {
    5. 

  5.             background-image : url("images/back.png");
    6. 

  6.             background-image : repeat;
    7. 

  7.             background-color : #ffffff;
    8. 

  8.     }
    9. 

  9. </style>
    10. 

  10. </head>
    11. 

  11. <body>
    12. 

  12. </body>
    13. 

  13. </html>
    14.

Hasilnya dapat Anda lihat pada gambar di bawah ini :
Untuk CSS-Shorthand nya adalah :
    

  1. body {
    2. 

  2.             background: url(images/back.png) repeat #fff;
    3. 

  3.     }
    4.
Untuk latihan berikutnya, kita akan coba dengan property repeat-x
background-repeat-x.html
    

  1. <html>
    2. 

  2. <head>
    3. 

  3. <style>
    4. 

  4.     body {
    5. 

  5.             background: url(images/bg-body.jpg) repeat-x #fff;
    6. 

  6.     }
    7. 

  7. </style>
    8. 

  8. </head>
    9. 

  9. <body>
    10. 

  10. </body>
    11. 

  11. </html>
    12.
Hasilnya dapat dilihat pada screenshots berikut ya :
Dan latihan berikutnya , Kita beri nama background-repeat-y.html, tapi penerapannya pada div#wrapper ya, teknik ini dulu sering saya lakukan dikarenakan pada saat itu belum ada property box-shadow, jadi buat bayangannya dari image/ gambar.
    

  1. <html>
    2. 

  2. <head>
    3. 

  3. <style>
    4. 

  4.     body {
    5. 

  5.         padding :0px;
    6. 

  6.         margin : 0px;
    7. 

  7.         background-color : #9ad6bd;
    8. 

  8.     }
    9. 

  9.     
    10. 

  10.     #wrapper {
    11. 

  11.         background-image:url(images/back.jpg);
    12. 

  12.         background-repeat:repeat-y;
    13. 

  13.         width:800px;
    14. 

  14.         height : 700px;
    15. 

  15.         margin-right:auto;
    16. 

  16.         margin-left:auto;
    17. 

  17.     }
    18. 

  18. </style>
    19. 

  19. </head>
    20. 

  20. <body>
    21. 

  21. <div id="wrapper">
    22. 

  22. </div>
    23. 

  23. </body>
    24. 

  24. </html>
    25.
Hasilnya dapat dilihat pada screenshots berikut :
Yang terakhir kebutuhannya sedikit berbeda kita akan memberikan gambar besar pada website. Buat blur supaya ga tabrak-tabrakan desainnya :-)
Pada kesempatan kali ini kita coba dengan cara External CSS, oke.. Yakni pemisahan antara file HTML dan CSS
Untuk file HTML silahkan Anda simpan dengan bakcground.html
    

  1. <html>
    2. 

  2. <head>
    3. 

  3. <link rel="stylesheet" href="style.css" />
    4. 

  4. </head>
    5. 

  5. <body>
    6. 

  6.     <img src="images/bg1.jpg" class="bg" alt="" />
    7. 

  7. </body>
    8. 

  8. </html>
    9.
Dan untuk File CSS silahkan simpan dengan nama style.css
    

  1. body {
    2. 

  2.     background: #8E8E8E;
    3. 

  3.     color: #666;
    4. 

  4. }
    5. 

  5. 

    6. 

  6. img.bg {
    7. 

  7.     display: block;
    8. 

  8.     min-height: 100%;
    9. 

  9.     min-width: 1024px;
    10. 

  10.     width: 100%;
    11. 

  11.     height: auto;
    12. 

  12.     position: fixed;
    13. 

  13.     top: 0;
    14. 

  14.     left: 0;
    15. 

  15. }
    16.
Dan hasilnya gambar akan memenuhi Browser Anda :
Berikut Link Gambar background : Link Download
Semoga Bermanfaat
at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)