CSS ile sayfadaki elemanların bir çok arka plan özellğini istediğimiz gibi ayarlayabiliriz..
BACKGROUND-COLOR
Elemanların arkaplan rengini ayarlar.. Zemin rengi , renk isimleri ile eklenebileceği gibi HTML'de anlattığım renk kodları ilede verilebilir..
HTML
<p> PARAGRAF </p>
<div>
<span> SPAN </span>
</div>
CSS
p { background-color: skyblue; } /*renk adı */
div { background-color: #1254af; } /* hex renk kodu /
span { background-color: rgba(255, 204, 0,.8); } /* transparan RGBA kodu
EKRAN
BACKGROUND-IMAGE
Elemanların arkaplan resmini ayarlar.. Resim dosyası url() parantezi içerisinde ve varsa klasör yolu ile belirtilmelidir..
HTML
<div class="apdiv"> </div>
CSS
div.apdiv { background-image: url('resim/css2mini.jpg'); height:200px; }
EKRAN
Eklenen arka plan resmi elemanın boyutlarından küçükse , resim otomatik olarak hem yatayda hem dikeyde tekrar edecektir..
BACKGROUND-REPEAT
Background-repeat , arka plan resimlerinin tekrar edip etmemesini ayarlar. 4 farklı değer alır.
- no-repeat : tekrar yok,
- repeat-x : sadece yatayda tekrarlar,
- repeat-y : sadece dikeyde tekrarlar,
- repeat : hem yatay hem dikeyde tekrarlar (varsayılan)
HTML
<div class="apdiv"> </div>
CSS
div {
height:200px;
background-image: url('resim/css2mini.jpg');
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
}
BACKGROUND-POSİTİON
Background-position, arka plan resminin, zemin üzerinde nasıl konumlanacağını belirler..
- Yönlerle Konumlandırma
- X ve Y Koordinat Değerleri ile Konumlandırma ( % ve PX)
YÖNLERLE KONUMLANDIRMA
Arka plan resmi için , yatayda sol (left) orta (center) ve sağ (right) yönleri, dikeyde ise üst (top) , orta (center) ve alt (bottom) yönlerinin seçilerek yapılan konumlandırmadır. Yönler yazılırken önce yatay konum sonra dikey konum yazılır ve arada boşluk bırakılır..
HTML
<div class="apdiv"> </div>
CSS
div {
height:100px;
background-image: url('resim/css2mini.jpg');
background-repeat: no-repeat;
background-position: left-top; /* sol üste konumlanır */
background-position: center-center; /* tam ortaya konumlanır */
background-position: right-bottom; /*sağ alta konumlanır */
}
Diğer yönleri de ikili yazarak farklı konumlar elde edebilirsiniz.. "left bottom" , left center" , center bottom" vs gibi....
X ve Y DEĞERLERİYLE KONUMLANDIRMA (% ve PX)
Arka plan resmi , yatay X ve dikey Y koordinatları yüzde yada piksel cinsinden yazılarak konumlandırılabilir. Sol üst köşe 0,0 orijin noktasıdır. Verilecek yüzde oranlarında yada piksel miktarlarında, pozitif değerlerde resim yatayda sağa , dikeyde aşağıya doğru konumlanır. Negatif değerlerde ise tam tersi yönlerde konumlanır.. Yönler yazılırken önce yatay koordinat oranı % , yada miktarı PX , sonra dikey koordinat oranı % , yada miktarı PX yazılır ve arada boşluk bırakılır..
HTML
<div class="apdiv"> </div>
CSS
div {
height:100px;
background-image: url('resim/css2mini.jpg');
background-repeat: no-repeat;
background-position: 100px 30px; /* sol ortaya yakın konumlanır */
background-position: 50% 50%; /* tam ortaya konumlanır */
background-position: 90% 90%; /*sol üstten dışarıya doğru konumlanır */
}
X ve Y koordinatları için farklı oranlar % yada miktarlar PX yazarak istediğiniz konumu elde edebilirsiniz..
BACKGROUND-SIZE
Background-size, arka plan resminin boyutunu, başka bir deyişle yerleşme oranını belirler.. Resim zemini tamamen kaplayabileceği gibi , belrli bir oranda zeminden küçük yada daha büyükte yapılabilir. Resim boyutnu birkaç farklı yolla değiştirebiliriz..
- Genişlik ve Yükseklik ile Boyut Belirleme
- Cover yada Contain ile Sığdırma
GENİŞLİK VE YÜKSEKLİK İLE BOYUT BELİRLEME
Arka plan resmini , genişlik ve yükseklik değerleri ile boyutlandırabiliriz. Değerler, YÜZDE ORAN yada PX uzunluklar olabilir. Size için bir yada iki değer verilebilir. Verilen yüzde oranlar , arka plan resmi uygulanan elemanın genişlik ve yüksekliğine göre alınır.
- "Size" için 1 değer yazılırsa , resmin genişliği olur. Bu durumda resmin yüksekliği, resmin orjinal genişlik/yükseklik oranı (ölçek) bozulmayacak şekilde otomatik ayarlanır..
- "Size" için 2 değer yazılırsa ilki resim genişliği , ikincisi ise yüksekliğini belirler. Resmin orjinal ölçeği bozulabilir. Ayırca değerlerin biri PX biri yüzde oranıda olabilir.
Body'ye değerler vererek sonuçlara bakalım...
body {
background-image: url('resim/css2mini.jpg'); /* arka plan resmi */
background-repeat: no-repeat; /* arka plan resim tekrarı */
background-size:50%; /* Resim genişliği sayfanın yarısı olurken , yükseklik resmin orjinal ölçeğine göre ayarlanır.. */
background-size:100%; /* Resim genişliği sayfayı kaplarken , yükseklik resmin orjinal ölçeğine göre ayarlanır.. */
background-size:100% 100%; /* Hem resim genişliği hemde yüksekliği 100% olacağından , resim sayfayı tam olarak kaplar */
background-size:100px; /* Resim genişliği 100PX olurken , yükseklik resmin orjinal ölçeğine göre ayarlanır.. */
background-size:150px 150px; /* Hem resim genişliği hemde yüksekliği 100PX olur */
background-size:50% 100px; /* Resim genişliği 10px , yüksekliği 150px olur.. */
}
background-size:100% 100%
background-size:150px 150px
background-size:50% 100px
COVER VE CONTAIN İLE BOYUT BELİRLEME
Arka plan resmini , genişlik ve yükseklik değerlerinin dışında, elemana sığdIrabilmek için COVER ve CONTAIN kullanarakta boyutlandırabiliriz.
COVER :
Cover, örtmek kaplamak anlamına gelir. "Size" özelliği olarak kullanıldığında , resmin genişliği , arka plan resmi uygulanan elemanın genişliğie eşitlenir ve, resmin yüksekliği , orjinal en/boy oranı bozulmayacak şekilde otomatik olarak ayarlanır. Resimde görüntü kaybı olabilir. Ayrıca eğer resmin orjinal yüksekliği , genişliğine göre çok düşükse , resim elemanı tam olarak kaplamayabilir..
CONTAIN :
Contain, içermek kapsamak anlamına anlamına gelir. "Size" özelliği olarak kullanıldığında , resmin en büyük ölçüde , en boy oranı bozulmadan, tam olarak eleman içerisine sığdırılması sağlanır. Resimde görüntü kaybı olmaz..
CSS
body {
background-image: url('resim/css2mini.jpg'); /* arka plan resmi */
background-repeat: no-repeat; /* arka plan resim tekrarı */
background-size:cover; /* Resim genişliği sayfayı kaplar, yükseklik resmin orjinal ölçeğine göre ayarlanır.. */
background-size:contain;
}
BACKGROUND-ATTACMENT
Background-attachement, arka plan resminin sayfa ile beraber hareket edip etmeyeceğini belirler. VAarsayılan değer scroll'dur. Arka plan resmi sanki normal bir resimmiş gibi , sayfa kaydırıldığında sabit durmaz ancak attachment için sabit değeri uygulanırsa sayfa kaydırıldığında resim sabit görünecektir..
scroll : Resim sayfa kaydırılıdğında sabit normal bir resimmiş gibi sayfayaa beraber kayar.. Varsayılan değerdir..
fixed : Resim,sayfa kaydırılırken sabit kalır..
body {
background-image: url('resim/css2mini.jpg'); /* arka plan resmi */
background-repeat: no-repeat; /* arka plan resim tekrarı */
background-size:100% 100%;
/* background-attachment:scroll; Varsayılan : Arka Plan Resmi sayfa kaydırıldığında normal bir resimmiş gibi davranır.. */
background-attachment:fixed; /* Arka Plan Resmi sayfa kaydırıldığında sabit kalır..*/
}
background-attachemet: scroll;
SCROLL Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
d
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
background-attachemet: fixed;
FIXEDLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
d
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
Görüşmek üzere..