Belajar CSS Dasar # Background

Daftar Isi : [Tampil]

1. Background

Yang Termasuk Properti Background Adalah

• background-color
• background-image
• background-repeat
• background-position
• background-attachment
• background-size

a. background-color

Digunakan untuk memberi warna pada background, value-nya adalah

• Nama Warna
• Hexadecimal
• RGBA (Red, Green, Blue, Alpha [opasitas 1-0] )

Seperti Contoh :

    body {
    	background-color : red/green/blue/etc;
        background-color : #ff0000/#008000/#0000ff/etc;
        background-color : rgba(255,0,0,1)/etc;
        background-color : rgba(255,0,0,0)/etc;
    }
    

b. background-image

Digunakan untuk memasukan gambar sebagai background. Bisa memasukan lebih dari satu gambar, value-nya adalah

• url()

Seperti Contoh :

  body {
  	background-image: url(anime.jpg);
    background-image: url(css/anime.jpg);
    background-image: url(../css/anime.jpg);
  }
  

c. background-repeat

Digunakan untuk mengatur background diulang atau tidak, background diulang secara vertikal atu horizontal. Jika ukuran gambar kecil maka akan otomatis diulang samapai memenuhi layar, value-nya adalah

• no-repeat
• repeat-x (horizontal)
• repeat-y (vertikal)

  body {
  	background-repeat: no-repeat;
    background-repeat: repeat-x;
    background-repeat: repeat-y;
  }
  

d. background-position

Digunakan untuk mengatur posisi gambar. jika gambar berukuran kecil secara default posisi gambar berada di pojok kiri atas elemen, value-nya adalah

• horizontal (left, center, right) dan vertical (top, center, buttom)

  body {
  	background-position: left top;
    background-position: left center;
    background-position: left bottom;
    background-position: right top;
    background-position: right center;
    background-position: right bottom;
    background-position: center top;
    background-position: center center;
    background-position: center bottom;
  }
  

e. background-attachment

Digunakan untuk mengatur apakah gambar background gulungan dengan sisa halaman, atau tetap.

• fixed (tetap)
• scroll (gulir)

  body {
  	background-attachment: fixed;
    background-attachment: scroll;
  }
  

f. background-size

Digunakan untuk menentukan ukuran gambar background, value-nya adalah

• auto (default value)
• px (mengatur panjang dan tinggi menggunakan pixel)
• % (mengatur panjang dan tinggi menggunakan percen)
• cover (mengubah ukuran gambar background menutupi seluruh elemen)
• contain (mengubah ukuran gambar background untuk memastikan gambar terlihat sepenuhnya)

  body {
  	background-size: auto;
    background-size: 200px;
    background-size: 10px 150px;
    background-size: 100%;
    background-size: 10% 15%;
    background-size: cover;
    background-size: contain;
  }
  

1.1 Background Shorthand

Digunakan untuk menyingkat penulisan css background. Seperti contoh :