CSS Background dan CSS Border

Property Background dan property Border pada CSS digunakan untuk memberikan warna dan border pada sebuah element HTML.

Contoh:

Memberikan warna background ke element <body> dan <h4>

Silahkan buka file style.css, lalu modifikasi menjadi seperti ini:

h4 {
    color: rgba(11, 99, 150, .2);
    background: rgba(198, 73, 166);
}

body {
    background: #C6C449;
}

Hasilnya menjadi seperti ini:

HTML Page

–

Atau, bisa juga dengan menambahkan Image ke background body. Silahkan modifikasi tag body seperti ini:

body {
    background: url(https://img.freepik.com/free-photo/old-wooden-texture-background-vintage_55716-1138.jpg?size=626&ext=jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

Hasilnya menjadi seperti ini:

HTML Page

catatan:

  • Untuk dapetin url yang di background, itu bisa cari gambar di google, terus copy url image-nya.
  • Coba dihapus si “background-repeat” dan “background-size” nya. Coba bandingkan hasilnya gimana.

–

CSS Border

Contoh yang Border: Modifikasi script yang h1 di file style.css menjadi seperti ini:

h1 {
    color: #176DB7;
    border-color: azure;
    border-width: 5px;
    border-style: solid;
}

Hasilnya akan menjadi seperti ini:

HTML Page

Catatan: Script diatas, sebenarnya bisa dibuat lebih ringkas menjadi seperti ini:

h1 {
    color: #176DB7;
    border: 5px solid azure;
}

Hasilnya akan sama saja. Tapi script-nya jadi lebih ringkas.

Written on April 1, 2019