CSS arka plan resmi Özellik
Örnek
<body> öğesi için bir arka plan görüntüsü ayarlayın:
body {
background-image: url("paper.gif");
background-color: #cccccc;
}
Örnek
<body> öğesi için iki arka plan resmi ayarlayın:
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-color: #cccccc;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik background-image, bir öğe için bir veya daha fazla arka plan görüntüsü ayarlar.
Varsayılan olarak, bir öğenin sol üst köşesine bir arka plan görüntüsü yerleştirilir ve hem dikey hem de yatay olarak tekrarlanır.
İpucu: Bir öğenin arka planı, dolgu ve kenarlık dahil öğenin toplam boyutudur (ancak kenar boşluğu değil).
İpucu: Görüntü mevcut değilse her zaman kullanılacak bir arka plan rengi ayarlayın .
| Varsayılan değer: | Yok |
|---|---|
| Miras: | Hayır |
| canlandırılabilir: | Hayır. Canlandırılabilir hakkında bilgi edinin |
| Sürüm: | CSS1 + CSS3'teki yeni değerler |
| JavaScript sözdizimi: | nesne .style.backgroundImage="url(img_tree.gif)" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Property | |||||
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Not: IE8 ve önceki sürümler, birden çok arka plan görüntüsünü desteklemez.
CSS Sözdizimi
background-image: url|none|initial|inherit;
Mülk değerleri
| Value | Description |
|---|---|
| url('URL') | The URL to the image. To specify more than one image, separate the URLs with a comma |
| none | No background image will be displayed. This is default |
| conic-gradient() | Sets a conic gradient as the background image. Define at least two colors |
| linear-gradient() | Sets a linear gradient as the background image. Define at least two colors (top to bottom) |
| radial-gradient() | Sets a radial gradient as the background image. Define at least two colors (center to edges) |
| repeating-conic-gradient() | Repeats a conic gradient |
| repeating-linear-gradient() | Repeats a linear gradient |
| repeating-radial-gradient() | Repeats a radial gradient |
| 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
<body> öğesi için iki arka plan görüntüsü ayarlar. İlk görüntünün yalnızca bir kez görünmesine izin verin (tekrar olmadan) ve ikinci görüntünün tekrarlanmasına izin verin:
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-repeat: no-repeat, repeat;
background-color: #cccccc;
}
Ö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 */
}
Örnek
Bir <div> öğesi için bir arka plan görüntüsü olarak bir doğrusal gradyan (iki renk) ayarlar:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
linear-gradient(red, yellow);
}
Örnek
Bir <div> öğesi için bir arka plan görüntüsü olarak bir doğrusal gradyan (üç renk) ayarlar:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
linear-gradient(red, yellow, green);
}
Örnek
Yinelenen-doğrusal-gradyan() işlevi, doğrusal gradyanları tekrarlamak için kullanılır:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}
Örnek
Bir <div> öğesi için arka plan görüntüsü olarak bir radyal gradyan (iki renk) ayarlar:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
radial-gradient(red, yellow);
}
Örnek
Bir <div> öğesi için arka plan görüntüsü olarak bir radyal gradyan (üç renk) ayarlar:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
radial-gradient(red, yellow, green);
}
Örnek
Yinelenen-radyal-gradyan() işlevi, radyal gradyanları tekrarlamak için kullanılır:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
repeating-radial-gradient(red, yellow 10%, green 20%);
}
İlgili Sayfalar
CSS eğitimi: CSS Arka Planı , CSS Arka Planları (gelişmiş) , CSS Gradyanları
HTML DOM referansı: backgroundImage özelliği