CSS Part 4:macam-macam background dan cara penggunaannya





MACAM-MACAM BACKGROUND DAN CARA PENGGUNAANNYA






ASSALAMUALAIKUM wr wb.

  apa kabar teman-teman kali ini saya akan membahas tentang background,apa teman-teman tau penggunaan background dan macam-macam background kalau belum tau berikut penjelasannya.

1.Pengertian background.
        Background, atau yang dikenal dengan latar belakang, merupakan salah satu komponen desain yang cukup penting. Background terutama digunakan untuk memberikan dekorasi visual terhadap sebuah elemen, yang akan mengakibatkan peningkatan kemudahan nalar atau pengertian akan sebuah konten. Background memiliki pengaruh yang sangat besar terhadap keseluruhan desain dari sebuah website karena hal ini.

2.Maksud dan tujuan.
    supaya lebih memahami css background dan macam-macam background serta cara penggunaannya.
3.Bahan dan alat.
-laptop/pc
-sublime text/notepad/atom
-web browser
4.Materi tentang background.
    CSS memberikan kita kemampuan penuh untuk mengatur bagaimana penampilan dari latar belakang sebuah elemen, sehingga kita dapat dengan mudah meningkatkan keindahan visual dari elemen tersebut.


Untuk lebih jelasnya, kita mari kita lihat langsung properti CSS yang berhubungan dengan hal ini!
Properti yang digunakan dalam CSS Background antara lain :
  • background-color
  • background-image
  • background-position
  • background-repeat
  • background-attachment
     berikut penjelasan dari properti diatas:

    1.Background-color

         Properti Background-color menetapkan warna latar belakang dari suatu elemen.
    Warna latar berlakang ini didefinisikan dalam pemilih body .
    berikut contoh penggunaan background color:
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    <style>
        p{
            background-color: #ea538b;
        }
    </style>
    </head>
    <body>

    <p>berikut ini contoh
    <br>penggunaan background-color untuk menambahkan warna</br>
    </p>
    </body>
    </html>


    dan ini hasilnya



 

2.Bakcground-image

      Properti Background-image menentukan warna gambar untuk digunakan sebagai latar belakang suatu elemen.
Secara default, gambar diulang sehingga mencakup seluruh elemen.
Gambar latar belakang untuk halaman bisa di set seperti ini:

berikut contoh penggunaan background-image:
<!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
    p{
        background-image: url(1.jpg);
        height: 600px;
        width: 800px;
    }
</style>
</head>
<body>

<p>berikut ini contoh
<br>penggunaan background-image untuk menambahkan foto pada background</br>
</p>
</body>
</html>
ini hasilnya:
 

3.Background-position

     Selain memberikan kontrol terhadap perulangan gambar latar, CSS juga memberikan kontrol terhadap posisi dari gambar latar itu sendiri. Hal ini tentunya sangat berguna, terutama untuk mengatur posisi pasti dari gambar latar pada elemen yang sangat besar, seperti penampung dari seluruh elemen dalam halaman.
berikut ini contoh penggunaan background-position:
<!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
    p{
        background-image: url(1.jpg);
        height: 600px;
        width: 800px;
        font-size: 40px;
        background-position: center top;
    }
</style>
</head>
<body>

<p>berikut ini contoh
<br>penggunaan background-image untuk menambahkan foto pada background</br>
</p>
</body>
</html>
berikut ini hasil dari script diatas.

4.Background Repeat


Background-repeat ini fungsinya untuk mengatur repeat atau pengulangan background-image, yaitu ketika ukuran gambar yang akan dijadikan background lebih kecil dari halaman, apakah gambar latar belakang akan diulang dalam posisi horizontal ataukah vertikal.

Secara default jika kita tidak menentukan repeat nya, maka posisi gambar akan mengkombinasikan antara keduanya, horizontal dan vertikal. Untuk horizontal dituliskan dengan repeat-x, sedangkan untuk vertikal ditulis repeat-y.

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
    p{
        background-image: url(1.jpg);
        height: 900px;
        width: 1200px;
        font-size: 40px;
        background-repeat: repeat-x;
    }
</style>
</head>
<body>

<p>berikut ini contoh
<br>penggunaan background-image untuk menambahkan foto pada background</br>
</p>
</body>
</html>
berikut ini hasilnya:

 

5.Background-attachment

properti Background-attachment digunakan untuk menentukan apakah gambar latar belakang tetap atau scroll dengan sisi halaman .
Properti  :
  • scroll
  • fixed
  • inherit
    berikut ini contoh penggunaan background-attachment:
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    <style>
        p{
            background-image: url(1.jpg);
            height: 900px;
            width: 1200px;
            font-size: 40px;
            background-repeat: repeat-x;
            background-attachment: scroll;
        }
    </style>
    </head>
    <body>

    <p>berikut ini contoh
    <br>penggunaan background-image untuk menambahkan foto pada background</br>
    </p>
    </body>
    </html>
    dibawah ini hasil dari script diatas:

    catatan:

    background-attachment:fixed;

    Dengan nilai fixed pada property background attachment, background akan bersifat/tak bergerak statis sehingga sekalipun halaman digulung background akan tetap berada ditempat dan selalu terlihat disalah satu bagian atau keseluruhan halaman. Anda dapat menggunakan background image berukuran kecil, besar, tak berulang/no-repeat, berulang/repeat, dibagian ujung, tengah atau samping kolom/halaman. Pengaturan background ini dapat melibatkan berbagai background property yang lain seperti background-size, background-position dan background-repeat.

    background-attachment:scroll;

    Menggunakan value scroll akan membuat background mengikuti pergerakan halaman sesuai dengan arah scroll/penggululung bergerak. Jika anda menggulung ke atas maka background image akan bergerak turun, sedang apabila menggulung ke bawah background image bergerak naik. Sama seperti background attachment fixed, background image dapat menggunakan berbagai ukuran tergantung besaran yang dibutuhkan. Pengulangan background juga bisa dilakukan.

       terima kasih telah membaca artikel ini semoga menambah ilmu.

    REFERENSI:
  • http://tutorial.belajarweb.net/css/tutorial-css-styling-css-background.html 
    http://www.w3schools.com/css/css_background.asp

          WASSALAMUALAIKUM wr wb.


Komentar

Posting Komentar

Postingan populer dari blog ini

how to upgrade php5.6 ke php 7.0

Gambar
UPGRADE PHP5.6 KE PHP7.0 ASSALAMUALAIKUM wr wb.     pada artikel kali ini saya akan membahas tentang bagaimana mengupgrade php5.6 ke php7.0 1.PENGERTIAN.     php yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML.  2.MAKSUD DAN TUJUAN.    untuk mengetahui fitur apa saja yang baru dari php7 dibandingan dengan php sebelumya. 3.ALAT DAN BAHAN. - laptop/komputer yang terinstall os linux. -koneksi internet.; -web browser. 4.WAKTU PELAKSANAAN.    sekitar kurang lebih 15 menit tergantung koneksi internet. 5.PEMBAHASAN.     kelebihan dan kekurangan php 1.kelebihan.             -Bisa membuat Web menjadi Dinamis.     -PHP bersifat Open Source yang berarti dapat digunakan oleh siapa saja secara gratis.     -Program yang dibuat dengan PHP bisa dijalankan oleh Semua Sistem Operasi karena PHP berjalan secara Web Base yag artinya semua Sistem Oper
Terus membaca

CSS Part 12: FONT CSS

Gambar
FONT CSS ASSALAMUALAIKUM wr wb.     apa kabar teman teman kali ini saya akan membahas tentang macam macam font teman teman yang pernah menggunakan ms word pasti pernah menggunakan jenis font apa tapi saya tidak membahas tentang ms word tapi font yang ada di css berikut artikel yang membahas tentang font. 1.Pengertian CSS Font.     metode untuk mengatur huruf pada elemen tag html. 2.MAKSUD dan TUJUAN.   untuk mengetahui cara penggunaan font. 3.BAHAN dan ALAT.  - laptop/pc  -web browser contohnya seperti mozilla fire fox atau yang lain  -memiliki aplikasi seperti sublime text/notepad  4.Materi CSS memberikan kita kemampuan penuh untuk mengatur jenis huruf elemen pada tag HTML. properti CSS yang berhubungan dengan yang digunakan dalam CSS font antara lain :         1.font family     2.font style     3.font size     4.font weight     5.font variant berikut contoh penerapan pada tag font diatas: 1.font family.     adalah tag yang digunakan untuk mengatur jenis pada h
Terus membaca

MENGANTI TAMPILAN THEME PADA WORDPRESS

Gambar
WORDPRESS ASSALAMUALAIKUM wr wb.    pada kesempatan kali ini saya akan menjelaskan bagaimana menganti tampilan theme pada wordpress. 1.PENGERTIAN.         adalah sebuah aplikasi sumber terbuka (open source) yang sangat populer digunakan sebagai mesin blog (blog engine). 2.MAKSUD DAN TUJUAN.        untuk bisa menganti tampilan wordpress sesuka kita. 3.ALAT DAN BAHAN.  -laptop/komputer.  -wordpress.  -web browser. 4.LAMA PELAKSANAAN.    sekitar 5 menit. 5.PELAKSANAAN.     1.buka web browser dan masuk ke wordpress. 2.pilih tampilan dan kilk tambahkan tema baru. 3.setelah pilih tema yang anda sukai dan klik install jika sudah klik aftifkan. 4.berikut hasil tampilan setelah diganti tampilan.     sekian dari artikel kali ini terima kasih telah berkunjung. WASSALAMUALAIKUM wr wb.
Terus membaca