CSS Background Background biasa digunakan untuk mempercantik tampilan keseluruhan, biasa di pakai background adalah foto, image dan lainnya. Background berlaku pula untuk penghias halaman web. Dalam desain web, background yang bisa digunakan berupa color dan image. CSS background mengizinkan kita untuk mengatur warna, setting image, repeat image secara horizontal dan vertical. 1. Property background Ada beberapa property yang akan kita bahas diantarannya 1.1. Background-color Digunakan untuk mengatur warna pada background. Nilai yang diatur adalah color dan transparent 1.1.1. Color Nilai bisa diatur menggunakan nama color secara langsung (red, blue, yellow dan lainnya), nilai RGB warna (225,0,0) dan hexadecimal yang dimulai degan karakter # diikuti enam angka decimal sebagai pengatur warna (#99CCFF). 1.1.2. Transparent Untuk mengatur transparansi warna. Syntax : Selector { property : value; Body { background-color : value ; Contoh coding dan tampilan <title>background color</title> body { background-color : #000099; color : #FFFFFF; <h1> LATAR BELAKANG BIRU </h1>
1.2. Background-image Property ini untuk mengatur penggunaan image sebagai background. Format yang didukung CSS diantaranya adalah JPEG, GIF, PNG. Nilai yang diatur pada property ini adalah none dan URL. None berarti background image tidak digunakan, sedangkan URL berarti background image digunakan dengan merujuk pada suatu lokasi file atau URL di internet. Sintax : Selector { property : value; Body { background-image : none atau URL ; Contoh tampilan dan coding : body{ background-image: url(image/naga.jpg) <title>background Image</title>
1.3. Background-Attachment properti ini tidak terdapat pada HTML. Properti ini digunakan untuk mengatur penggunaan scrollbar pada halaman web. Nilai yang ada pada properti ini adalah fixed dan scroll, fixed digunakan jika anda menginginkan untuk tidak bisa menggunakan scrolling mouse pada halaman web anda. scroll digunakan untuk bisa melakukan scrolling mouse pada halaman web. Sintaks: Selector {properti : value; Body { Background-attachment : fixed scroll; 1.4. Background-Repeat Digunakan untuk me-repeat atau memperbesar ukuran image yang kecil agar menyesuaikan dengan ukuran halaman web. Penggunaan background repeat hanya bisa dilakukan apabila anda telah mengatur background menggunakan properti image. Nilai repeat yang bisa diatur antara lain : 1.4.1. Repeat
Me-repeat image, baik secara horizontal maupun vertical memenuhi halaman web. Berikut contoh Sintaks dan tampilan nilai properti repeat : <title>background repeat </title> body{ background-repeat:repeat; background-image: url(image/iconultraman/1-1.png) 1.4.2. Repeat-x Repeat image background dengan posisi horizontal. <title>background repeat </title> body{ background-repeat:repeat-x ; background-image: url(image/iconultraman/1-1.png)
1.4.3. Repeat-Y Repeat background degan posisi vertical. <title>background repeat </title> body{ background-repeat:repeat-y; background-image: url(image/iconultraman/1-1.png)
1.4.4. No-repeat Tidak melakukan repeat pada image. Image akan tampil sesuai dengan ukuran aslinya. <title>background repeat </title> body{ background-repeat:no-repeat; background-image: url(image/iconultraman/1-1.png)
1.5. Background-Position Digunakan untuk mengatur posisi background yang akan digunakan.hal pertama yang dilakukan adalah mengatur properti background-nya menjadi image. Posisi background yang bisa di atur adalah top, center, bottom, left, center, right. Selain menentukan posisi background secara default (bottom, top, dll), kita juga bisa menentukan posisi background menggunakan nilai x% dan y % persen. Contoh sintaks dan tampilan : body { background-image:url(images/pwnsonicgms.jpg); background-position: center; background-repeat:no-repeat; <title>background positiont</title>
body { background-image:url(images/pwnsonicgms.jpg); background-position: 50% -10%; background-repeat:no-repeat; <title>background positiont</title>