CSS Properties
Di bawah ini yakni macam-macam CSS Properties yang dipakai untuk menciptakan background:1. background-color
2. background-image
3. background-attachment
4. background-position
5. background-repeat
Background Color
Anda sanggup menawarkan nilai atau value pada background-color dengan 3 cara, yaitu:1. Menggunakan nilai Hexadecimal menyerupai "#0000ff"
2. Menggunakan nilai RGB menyerupai RGB(255,255,0)
3. Menggunakan nama color menyerupai "red","yellow", dan lain sebagainya.
Di bawah ini yakni pola penggunakan CSS background color pada elemen/tag HTML:
Nama file: background-color.html
<!DOCTYPE html> <html> <head> <style> h1 { background-color: red; } p { background-color: #e0ffff; } div { background-color: rgb(10,255,250); } </style> </head> <body> <h1>Heading 1 memakai CSS Background Color</h1> <div> Ini yakni elemen DIV yang memakai CSS Background Color. <p>Ini yakni elemen paragraf yang memakai CSS Background Color.</p> Ini juga masih di dalam elemen DIV </div> </body> </html> 
Background Image
Background Image dipakai untuk menampilkan image atau gambar sebagai background pada elemen atau tag di HTML.Untuk lebih jelasnya, Anda sanggup eksklusif mencobanya menyerupai script di bawah ini:
Nama File: background_image.html
<!DOCTYPE html> <html> <head> <style> body { background-image: url("unnamed.jpg"); } </style> </head> <body> <h1>Ini yakni heading</h1> <p>Ini yakni heading</p> <div><p>Paragraf ini di dalam elemen DIV</p> </div> </body> </html> Apabila file diatas dijalankan di web browser, maka akan menampilkan output menyerupai di bawah ini:
Background Repeat
Background Repeat di gunakan untuk menampilkan background image berulang-ulang baik secara horisontal maupun vertikal.Ada beberapa nilai yang sering dipakai pada Background Repeat, yaitu:
1. repeat-x dipakai untuk mengulang background-image secara horisontal
2. repeat-y dipakai untuk mengulang background-image secara vertikal
3. no-repeat dipakai biar background-image tidak tampil secara berulang (sesuai gambar aslinya).
Untuk lebih jelasnya, Anda sanggup memperhatikan pola dibawah ini:
Nama File: background_repeat.html
<!DOCTYPE html> <html> <head> <style> body { background-image: url("unnamed.jpg"); background-repeat: repeat-x; } </style> </head> <body> <h1>Ini yakni heading h1</h1> <h2>Ini yakni heading h2</h2> <h3>Ini yakni heading h3</h3> <p>Ini yakni heading</p> <div><p>Paragraf ini di dalam elemen DIV</p> </div> </body> </html> Apabila file diatas dijalankan di web browser, maka akan menampilkan output menyerupai di bawah ini:
Coba Anda modifikasi file diatas dengan mengubah background-repeat nya menjadi:
background-repeat: repeat-y;
Maka akan menampilkan output menyerupai di bawah ini:
