Css Eğitimi Ders 4-Arkaplan

Merhaba,
Şuan itibariyle css kullanım örneklerine başlıyoruz. İlk olarak arkaplan ile başlayalım.

Arkaplan Rengi

Normalde şimdi renklerin nasıl kullandığını anlatmak isterdim fakat bu bilindik bir şey. Bunu kullanarak öğreniceksiniz. Zaten ccs'nin temeli renklerdir. Bir örnek yapalım:

body { 

background-color: yellow; 

}

Burada arka plan renginin yellow (sarı) olmasını sağladık. Bunun yerine kodlama kullanabiliriz. #'den sonra gelen renk kodları da burada kullanılabilir.

Arkaplan Resmi

Eğer arkaplana bir resim eklemek istiyorsak bu işlemi kullanırız. Ve zaten genellikle bu kullanılır. Ya adres yoluyla ya da hosting'te resim adı ile bağlantı kurulur Örneğin:

body {
background-image: url('image.jpg');

}

Bu şekilde "url" ile ya köprü bağlantısı ya da "image.jpg" kısmı ile sitede bulunan bir resmi ekleyebiliriz.

Arkaplan Repeat (Döşeme)

Yüklediğiniz arkaplan resmi eğer tam arka plana sığmıyor ise o zaman repeat özelliğine başvurulur. Yani resim tekrar ederek döşenir. Örneğin:

body {

 background-image: url('image.jpg'); 

background-repeat: no-repeat; 

}

Repeat özelliğinin değerleri:

• no-repeat : Tekrar edilmeyecektir
• repeat : Tekrarlanacaktır / döşenecektir
• repeat-x : Sadece sağa doğru tekrar edecektir
• repeat-y : Sadece aşağı doğru tekrar edecektir

Bundan da anlayacağımız gibi repeat özelliği küçük arkaplan resimleri için önemlidir.

Arkaplan Attachment (Sabitlik)

Bir arkaplan resminin sabitliğini belirlemek istiyorsak bu özelliğe fixed değeri veririz. Örneğin:

body { 

background-image: url('image.jpg');

background-attachment: fixed; 

}

Arkaplan Position

Eğer arkaplanı "no-repeat" yani tekrar etmeyecek özelliği kattıysak bu resmin nereye hizalancağını belirleyebiliriz. Örneğin:

body { 

background-image: url('image.jpg'); 

background-repeat: no-repeat; 

background-position: left top; 

}

Burada left: sol, top: üst yani sol üst anlamındadır.

Arkaplan Belirmenin Kısa Yolu

body { 

background: #000000 veya url('image.jpg') no-repeat left top; 

}

Bu şekilde uzun bir kodu kısaltabilirsiniz.