CSS background-position Özelliği

Tanım ve Kullanım

background-position Arka plan görselinin başlangıç konumunu ayarlayan özellik.

Bu özellik, arka plan ana görseli (tarafından ayarlanır background-image Tanımın (location) konumunda, arka plan görseli tekrarlamak istendiğinde buradan başlayacak.

İpucu:background-attachment özelliğini "sabitFirefox ve Opera'da bu özelliğin düzgün çalışmasını sağlamak için "

Ayrıca bkz:

CSS eğitim:CSS Arka Plan

CSS referans el kitabı:background-image özelliği

HTML DOM referans el kitabı:backgroundPosition özelliği

Örnek

Arka plan görseli nasıl konumlandırılır:

body
{ 
background-image:url('bgimage.gif');
background-repeat:sadece bir kez tekrar;
background-attachment:sabit;
background-position:merkez;
}

Kişisel olarak deneyin

CSS dilbilgisi

background-position: değer;

Özellik değeri

Değer Açıklama
  • üst sol
  • üst ortası
  • üst sağ
  • ortası sol
  • ortası ortası
  • ortası sağ
  • sol alt
  • alt ortası
  • sağ alt

Sadece bir anahtar kelime belirttiyseniz, ikinci değeri "merkez" olacaktır.

Varsayılan değer: 0% 0%.
x% y%

İlk değer yatay konum, ikinci değer dikey konumdur.

Sol üst köşe 0% 0%'dir. Sağ alt köşe 100% 100%'dir.

Sadece bir değer belirttiyseniz, diğer değeri %50 olacaktır.
xpos ypos

İlk değer yatay konum, ikinci değer dikey konumdur.

Sol üst köşe 0 0'dır. Birimler piksel (0px 0px) veya herhangi bir diğer CSS birimidir.

Sadece bir değer belirttiyseniz, diğer değeri %50 olacaktır.

% ve position değerlerini karışık kullanabilirsiniz.

Teknik ayrıntılar

Varsayılan değer: 0% 0%
Miras: hayır
Sürüm: CSS1
JavaScript dilbilgisi: nesne.style.backgroundPosition="merkez"

Daha fazla örnek

Piksel kullanarak arka plan görseli nasıl konumlandırılır
Bu örnek, sayfada arka plan görseli nasıl konumlandırılacağını göstermektedir.
Piksel kullanarak arka plan görseli nasıl konumlandırılır
Bu örnek, sayfada arka plan görseli nasıl konumlandırılacağını göstermektedir.

Tarayıcı desteği

Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5