Style background özelliği

Tanım ve Kullanım

background Özellik, en fazla sekiz ayrı arka plan özelliğini kısa formatta ayarlar veya döndürebilir.

Bu özellikle, aşağıdaki bir veya birkaç seçeneği ayarlayabilir veya döndürebilirsiniz (herhangi bir sırayla):

DOM Özelliği CSS Özelliği
backgroundAttachment background-attachment
backgroundClip background-clip
backgroundColor background-color
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize background-size

Yukarıdaki özellikler ayrı单独的样式属性 ile de ayarlanabilir. İleri düzey olmayan yazarlar için daha iyi denetim elde etmek için ayrı attribute kullanımı şiddetle tavsiye edilir.

Ayrıca bakınız:

CSS Eğitimi:CSS arka plan

CSS3 Eğitimi:CSS3 Arka Plan

CSS Referans Kılavuzu:background özelliği

Örnek

Belgenin arka planının tarzını ayarlar:

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

Kendi kendine deneyin

Sayfa altında daha fazla TIY örneği bulunmaktadır.

Gramer

background özelliğini döndürür:

object.style.background

background özelliğini ayarlar:

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

Özellik değeri

Değer Tanım
color Elementin arka plan rengini ayarlar.
image Elementin arka plan görselini ayarlar.
repeat Arka plan görselinin tekrarlanma şeklini ayarlar.
attachment Arka plan görselinin sabit mi yoksa sayfa kayarken kayan mı olacağını ayarlar.
position Arka plan görselinin başlangıç konumunu ayarlar.
size Arka plan görselinin boyutunu ayarlar.
origin Arka plan konum alanını ayarlar.
clip Arka plan görselinin çizim alanını ayarlar.
initial Bu özelliği öntanımlı değerine ayarlar. Bakınız initial.
inherit Bu özelliği ebeveyn elementinden devralır. Bakınız inherit.

Teknik ayrıntılar

Öntanımlı değer: .transparent none repeat scroll 0% 0% auto padding-box border-box
Dönüş değeri: Dizgi, elementin arka planını belirtir.
CSS Sürümü: CSS1 + CSS3'teki yeni özellikler

Daha fazla örnek

Örnek 2

Değiştirme DIV elementinin arka planı:

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

Kendi kendine deneyin

Örnek 3

Belgeye arka plan rengi ayarlar:

document.body.style.backgroundColor = "red";

Kendi kendine deneyin

Örnek 4

Belgeye arka plan görseli ayarlar:

document.body.style.backgroundImage = "url('img_tree.png')";

Kendi kendine deneyin

Örnek 5

Arka plan görselini tekrar etmez:

document.body.style.backgroundRepeat = "repeat-y";

Kendi kendine deneyin

Örnek 6

Arka plan görselini sabit olarak ayarlar (sarmaşık olmaz):

document.body.style.backgroundAttachment = "fixed";

Kendi kendine deneyin

Örnek 7

Arka plan görselinin konumunu değiştirir:

document.body.style.backgroundPosition = "top right";

Kendi kendine deneyin

Örnek 8

Belgenin arka plan özellik değerini döndürür:

document.body.style.background;

Kendi kendine deneyin

Tarayıcı desteği

background CSS1 (1996) özelliğidir.

Tüm tarayıcılar tamamen destekler:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Desteklenir Desteklenir Desteklenir Desteklenir Desteklenir Desteklenir

Yorum

CSS3 (1999)'ta üç yeni özellik eklendi: