Giriş yap

CSS'de background Özelliği
CSS1 CSS3

background özelliği aşağıdaki background özelliklerinin kısa halde kullanımıdır.

background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment

Kullanılırken background özelliklerini sırasına göre tam şekilde yazmak zorunda değiliz yani background: #fff url(test.png) fixed; şeklinde bir kullanımda geçerli olacaktır.

Yapısı (Syntax)background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial | inherit;

JavaScript Yapısı object.style.background="red url(ataturk.jpg) top left no-repeat"
Animasyon Özellikleri Uygulanabilir Evet

Değerler

Değer Açıklama Versiyon
background-color Arkaplan rengini belirler CSS1
background-image Arkaplan görselini belirler CSS1
background-position Arkaplan görselinin konumunu belirler CSS1
background-size Arkaplan görselinin boyutunu belirler CSS3
background-repeat Arkaplan görselinin nasıl tekrarlanacağını belirler CSS1
background-origin Arkaplan görselinin başlangıç konumunu belirler CSS3
background-clip Arkaplan görseli ya da arkaplan renginin başlangıç konumunu belirler CSS3
background-attachment Arkaplan görselinin sabitlenip sabitlenmeyeceği ya da içerikler ile birlikte kaydırılabilir olup olmayacağını belirler CSS1
initial Değerleri varsayılana döndürür CSS3
inherit Özelliği üst öğesinden miras alır. CSS2

Örnekler

Tüm özelliklerin bir arada kullanıldığı bir örneğe bakalım;

.box {
    width: 400px;
    height: 400px;
    padding: 25px;
    border: 6px dotted #222;
    background: yellow url(https://prototurk.com/public/img/logo.png) center no-repeat/450px content-box fixed;
}

Bazı özelliklerini bir arada kullanıldığı örnek ise;

.box {
    width: 200px;
    height: 100px;
    background: #fa6585 url(hello.gif) center;
}

tayfunerbilen
129 gün önce eklendi.
Github'da Düzenle
Önemli Başlıklar