CSS arka plan konumu Özellik

Örnek

Bir arka plan görüntüsü nasıl konumlandırılır:

body {
  background-image: url('w3css.gif');
background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.

Tanım ve Kullanım

Özellik background-position, bir arka plan görüntüsünün başlangıç konumunu ayarlar.

İpucu: Varsayılan olarak, bir öğenin sol üst köşesine bir arka plan resmi yerleştirilir ve hem dikey hem de yatay olarak tekrarlanır.

Varsayılan değer:	0% 0%
Miras:	Hayır
canlandırılabilir:	Evet. Canlandırılabilir hakkında bilgi edinin
Sürüm:	CSS1
JavaScript sözdizimi:	nesne .style.backgroundPosition="center"

Tarayıcı Desteği

Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Property
background-position	1.0	4.0	1.0	1.0	3.5

Not: IE8 ve önceki sürümler, bir öğe üzerinde birden çok arka plan görüntüsünü desteklemez.

CSS Sözdizimi

background-position: value;

Mülk değerleri

Value	Description	Play it
left top left center left bottom right top right center right bottom center top center center center bottom	If you only specify one keyword, the other value will be "center"
x% y%	The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0%
xpos ypos	The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Daha fazla örnek

Örnek

Üstte ortalanacak bir arka plan görüntüsü nasıl konumlandırılır:

body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}

Örnek

Bir arka plan resmi nasıl sağ altta olacak şekilde konumlandırılır:

body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
}

Örnek

Yüzde kullanarak bir arka plan görüntüsü nasıl konumlandırılır:

body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}

Örnek

Piksel kullanarak bir arka plan görüntüsü nasıl konumlandırılır:

body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 150px;
}

Örnek

Bir "kahraman" görüntüsü oluşturmak için farklı arka plan özelliklerini kullanın:

.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}