Cara Mengatur Properties Background dengan CSS

Cara Mengatur Properties Background dengan CSS

Hallo gan, Selamat datang dan terimakasih telah berkunjung ke website kami (ilmukita.org) . Di artikel cara mengatur properties background dengan CSS kita akan mengutak-atik background (latar belakang) sebuah Tag atau elemen HTML. Dalam artikel ini properties yang akan di bahas yaitu :

  • Background color
  • Background

Berikut penjelasannya.

Properties background color di CSS

Properties background color digunkan untuk mengatur warna latar belakang sebuah Tag atau elemn HTML. Berikut format penulisan properties background color di CSS

Untuk pemberian value/nilai silahkan baca di  metode memberian warna di CSS

Contoh penggunaan background color di CSS

 

Properties untuk mengatur background di CSS

Properties background image di CSS

Kegunaan background image yaitu untuk merubah latar belakang menjadi gambar.

Format penulisan background image di CSS

Secara default, background image akan di repeat (berulang ) sepanjang element HTML yang diberi background image.

Contoh penggunaan backgound image di CSS

Properties untuk mengatur background di CSS

Background repeat di CSS

Background repeat digunakan mengatur latarbelakang gambar ditampilkan berulang secara vertical maupun horizontal, ataupun tidak di ulang secara vertikal maupun horizontal.

Format penulisan background repeat di CSS

Value Keterangan
repeat Gambar latar belakang akan diulang secara vertikal dan horizontal
repeat-x Gambar latar belakang akan diulang secara horizontal.
repeat-y Gambar latar belakang akan diulang secara vertikal.
no-repeat Gambar latar belakang tidak akan diulang secara vertikal maupun horizontal.

Contoh penggunaan background repeat di CSS

Properties untuk mengatur background di CSS

Background attachment di CSS

Background attachment digunakan untuk mengatur latar belakang berupa gambar tidak bergeser atau bergeser sesuai dengan gerakan page/halaman maupun element.

Format penulisan background attachment di CSS

Value Keterangan
fixed Latar belakang gambar akan tetap fixed atau tidak bergerak ketika page sedang kita gerakkan atau kita scroll
scroll Latar belakang gambar akan scroll atau bergerak mengikuti page yang sedang kita gerakkan atau kita scroll
local Latar belakang gambar bergerak mengikuti gerakan element

Contoh penggunaan background attachment di CSS

tampilan awal
tampilan awal

saat di scroll
saat di scroll

Background position di CSS

Background position digunakan untuk mengatur posisi atau letak latar belakang berupa gambar. Ada tiga cara menentukan posisi sebuah background image yaitu dengan pixsel, persen dan keyword.

Format penulisan background postion menggunakan pixsel

Keterangan :

  • X : value untuk horizontal
  • Y : value untuk pertikal

Format penulisan background postion menggunakan persen

Keterangan :

  • X : value untuk horizontal
  • Y : value untuk pertikal

Format penulisan background postion menggunakan keyword

Value keyword X Value keyword Y
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

Contoh penggunaan background postion di CSS

backgroun-postion

Background size di CSS

Background size digunakan untuk mengatur ukuran latar belakang berupa gambar .

Format penulisan background size menggunakan pixsel

Format penulisan background size menggunakan persen

Contoh penggunaan background size di CSS

Properties untuk mengatur background di CSS

LEAVE A REPLY

Please enter your comment!
Please enter your name here