Arkaplan (Background) Ozellikleri
Arkaplan (Background) ÖzellikleriArtalan (Background) Özellikleri
Artalan dolgu alanı (padding) ve içerik alanını kapsar.. Artalan özelliklerini sırasıyla inceleyelim;
Artalan Rengi (background-color)
Elemanımızın artalanına bir renk atamak için kullanırız.. Örnek kullanım şekli aşağıdaki gibidir..
body {background-color: silver}
Artalan Resmi (background-image)
Elemanımızın artalanına resim atamak için kullanırız.. Örnek kullanım şekli aşağıdaki gibidir..
body {background-image: url(resim.jpg)}
url değerimizin içine resmin yolunu belirtiyoruz..
Artalan Resmi Yineleme (background-repeat)
Artalan resmimizi x ekseninde, y ekseninde, her iki eksende ya da hiçbir eksende uzatmamak için kullanırız.. Alabileceği 4 değer vardır..
* repeat-x : x ekseninde uzatır..
* repeat-y : y ekseninde uzatır..
* repeat : her iki eksendede uzatır..
* no-repeat : eksenlerde uzatmaz..
Örnek kullanımları aşağıdaki gibidir..
body {background-repeat: repeat-x}
body {background-repeat: repeat-y}
body {background-repeat: repeat}
body {background-repeat: no-repeat}
body {background-repeat: repeat-y}
body {background-repeat: repeat}
body {background-repeat: no-repeat}
Artalan Resim Bağlılığı (background-attachment)
Bu özellik ile artalana eklenen resmin sayfa ile kaymasını (scroll) veya sayfanın artalanına çakılı (fixed) kalmasını sağlarız.. Alabileceği 2 değer vardır..
* scroll : artalan scroll aşağı indiğinde eski halinde kalacak scroll ile birlikte gelmeyecektir..
* fixed : artalan scroll indikçe çakılı kalacak ve scroll ile inecektir..
Örnek kullanımları aşağıdaki gibidir..
body {background-attachment: scroll}
body {background-attachment: fixed}
body {background-attachment: fixed}
Artalan Resmi Konumu (background-position)
Artalana eklediğimiz resmin konumunu belirleriz.. Alabileceği 9 değer vardır..
* top left : yukarıda ve soldan başlar
* top center : yukarıda ve ortadan başlar
* top right : yukarıda ve sağdan başlar
* left : soldan başlar
* center : ortadan başlar
* righht : sağdan başlar
* bottom left : aşağıda ve soldan başlar
* bottom center : aşağıdaki ve ortadan başlar
* bottom right : aşağıda ve sağdan başlar
Örnek kullanımları aşağıdaki gibidir..
body {background-position: top left}
body {background-position: top center}
body {background-position: top right}
body {background-position: left}
body {background-position: center}
body {background-position: right}
body {background-position: bottom left}
body {background-position: bottom center}
body {background-position: bottom right}
body {background-position: top center}
body {background-position: top right}
body {background-position: left}
body {background-position: center}
body {background-position: right}
body {background-position: bottom left}
body {background-position: bottom center}
body {background-position: bottom right}
Artalan (background)
Yukarıdaki artalan özelliklerini bir arada kullanmak istersek bu özellikle yaparız.. Özelliklerin sırası aşağıdaki gibi olmalıdır..
background-color > background-image > background-position > background-attachment > background-repeat
Örnek kullanımı aşağıdaki gibidir..
body {background: #000 url(bg.jpg) top center fixed repeat-x}