CSS arka plan tekrarı Özellik

Örnek

Bir arka plan görüntüsünü yalnızca dikey olarak tekrarlayın:

body {
background-image: url("paper.gif");
background-repeat: repeat-y;
}

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

Tanım ve Kullanım

Özellik background-repeat, bir arka plan görüntüsünün tekrarlanıp tekrarlanmayacağını/nasıl olacağını belirler.

Varsayılan olarak, bir arka plan görüntüsü hem dikey hem de yatay olarak tekrarlanır.

İpucu: Arka plan görüntüsü, arka plan konumu özelliğine göre yerleştirilir. Arka plan konumu belirtilmemişse, görüntü her zaman öğenin sol üst köşesine yerleştirilir.

Varsayılan değer:	tekrarlamak
Miras:	Hayır
canlandırılabilir:	Hayır. Canlandırılabilir hakkında bilgi edinin
Sürüm:	CSS1
JavaScript sözdizimi:	nesne .style.backgroundRepeat="tekrar-x"

Tarayıcı Desteği

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

Property
background-repeat	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

Mülk değerleri

Value	Description	Play it
repeat	The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default
repeat-x	The background image is repeated only horizontally
repeat-y	The background image is repeated only vertically
no-repeat	The background-image is not repeated. The image will only be shown once
space	The background-image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images
round	The background-image is repeated and squished or stretched to fill the space (no gaps)
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

Bir arka plan görüntüsünü hem dikey hem de yatay olarak tekrarlayın (bu varsayılandır):

body {
background-image: url("paper.gif");
background-repeat: repeat;
}

Örnek

Bir arka plan resmini yalnızca yatay olarak tekrarlayın:

body {
background-image: url("paper.gif");
background-repeat: repeat-x;
}

Örnek

Bir arka plan resmini tekrarlamayın. Resim yalnızca bir kez gösterilecektir:

body {
background-image: url("paper.gif");
background-repeat: no-repeat;
}

Örnek

Arka plan tekrarını kullanma: boşluk ve arka plan tekrarı: yuvarlak:

#example2 {
border: 2px solid black;
padding: 25px;
  background: url("w3css.gif");
background-repeat: space;
}

#example3 {
  border: 1px solid black;
padding: 25px;
background: url("w3css.gif");
  background-repeat: round;
}

Ö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 */
}