Membuat Background / Latar Belakang Pada CSS ~ KODELOVER

Properti latar belakang CSS digunakan untuk menentukan efek latar belakang untuk elemen.

Properti latar belakang CSS:

background-color
background-image
background-repeat
background-attachment
background-position

Warna latar belakang

Properti latar-warna menentukan warna latar belakang suatu elemen.

Warna latar belakang halaman diatur seperti ini:
Contoh

body {
background-color: lightblue;
}

Dengan CSS, warna paling sering ditentukan oleh:

    Nama warna yang valid - seperti "red"
    Nilai HEX - seperti "# ff0000"
    Nilai RGB - seperti "rgb (255,0,0)"

Lihatlah Nilai Warna CSS untuk daftar lengkap nilai warna yang mungkin.

Pada contoh di bawah ini, elemen <h1>, <p>, dan <div> memiliki warna latar belakang yang berbeda:
Contoh

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}

Gambar latar belakang

Properti background-image menentukan gambar yang akan digunakan sebagai latar belakang elemen.

Secara default, gambar diulang sehingga mencakup keseluruhan elemen.

Gambar latar belakang untuk halaman dapat diatur seperti ini:
Contoh

body {
background-image: url ("paper.gif");
}

Berikut adalah contoh kombinasi teks dan gambar latar belakang yang buruk. Teksnya hampir tidak bisa dibaca:
Contoh

body {
background-image: url ("bgdesert.jpg");
}

Bila menggunakan gambar latar belakang, gunakan gambar yang tidak mengganggu teks.

Gambar Latar Belakang - Ulangi secara horisontal atau vertikal

Secara default, properti gambar latar belakang mengulangi gambar secara horisontal dan vertikal.

Beberapa gambar harus diulang hanya secara horisontal atau vertikal, atau mereka akan terlihat aneh, seperti ini:
Contoh

body {
background-image: url ("gradient_bg.png");
}

Jika gambar di atas diulang hanya secara horisontal (background-repeat: repeat-x;), background akan terlihat lebih baik:
Contoh

body {
background-image: url ("gradient_bg.png");
background-repeat: repeat-x;
}

Untuk Mengulangi gambar yang diatur secara vertikal gunakan background-repeat: repeat-y;

Background Image - Tetapkan posisi dan no-repeat

Menampilkan gambar latar belakang hanya sekali juga ditentukan oleh properti pengulang latar belakang:
Contoh:

body {
background-image: url ("img_tree.png");
background-repeat: no-repeat;
}

Pada contoh di atas, gambar latar belakang ditampilkan di tempat yang sama dengan teks. Kami ingin mengubah posisi gambar, sehingga tidak mengganggu teks terlalu banyak.

Posisi gambar ditentukan oleh properti posisi latar belakang:
Contoh

body {
    background-image: url ("img_tree.png");
    background-repeat: no-repeat;
    background-position: left up;
}

Gambar Latar Belakang - Posisi Tetap

Untuk menentukan bahwa gambar latar belakang harus diperbaiki (tidak akan bergulir dengan sisa halaman), gunakan properti lampiran latar belakang:
Contoh

body {
    background-image: url ("img_tree.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-attachment: fixed;
}

Latar Belakang - properti Shorthand

Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti latar belakang dalam satu properti tunggal. Ini disebut properti singkatan.

Properti singkat untuk latar belakang adalah latar belakang:
Contoh

body {
background: #ffffff url ("img_tree.png") no-repeat right top;
}

Bila menggunakan properti singkat, urutan nilai properti adalah:

background-color
background-image
background-repeat
background-attachment
background-position

Tidak masalah jika salah satu nilai properti hilang, asalkan yang lain ada dalam urutan ini.

Semua Properti Background pada CS

Property	Description
background	Menetapkan semua properti latar belakang dalam satu deklarasi
background-attachment	Menetapkan apakah gambar latar adalah tetap atau digulung dengan bagian halaman lainnya
background-color	Mengatur warna latar belakang elemen
background-image	Mengatur gambar latar belakang untuk sebuah elemen
background-position	Mengatur posisi awal gambar latar belakang
background-repeat	Menetapkan bagaimana gambar latar akan diulang

KODELOVER

Membuat Background / Latar Belakang Pada CSS

Semua Properti Background pada CS

Related Post