CSS Serisi – 3) CSS Örnekleri 1.1 Arkaplanlar
Merhaba arkadaşlar, CSS Tanımını, Kullanımını ve CSS Örneklerini paylaşacağım “CSS Serisi” makalelerine “CSS Örnekleri” ile devam ediyoruz. “CSS Nedir?” diye merak eden arkadaşlar ilk yazıyı, “CSS Kullanımını” öğrenmek isteyen arkadaşlar da ikinci yazıyı inceleyebilirler.
CSS Arkaplanlar
CSS, istediğimiz bir bölgenin arkaplanını kolay ve basit bir şekilde değiştirmemize olanak sağlıyor. İster renk, istersek de resim olarak arka planımızı değiştirebiliyoruz.
background-color: Arkaplan Rengi
Bu kod, bir elementin arka plan rengini değiştirmemizi sağlar.
Kullanımı : div { background-color: #EFEFEF; }
background-image: Arkaplan Resmi
Bu kod, bir element içinde arkaplan resmi kullanmamızı sağlar.
Kullanımı : body { background-image: url(‘resim.jpg’); }
URL alanına resmin adı veya yolunu yazıyoruz.
background-repeat: Arkaplan Tekrarı / Döşeli
Bu kod ile, kullandığımız arkaplan resminin tekrar edip etmeyeceğini belirleyebiliyoruz. Dört çeşit kullanımı bulunmaktadır:
- 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
Kullanımı:
body {
background-image: url(‘resim.jpg’);
background-repeat: no-repeat;
}
background-attachment: Arkaplan Sabitliği
Bu kod, arkaplanımızın sabit kalıp kalmayacağı hakkında ayar yapmamızı sağlar. Eğer özellik değerinin sabit kalmasını (yani sayfanın yerine göre değişmemesini) istiyorsak fixed özelliğini kullanırız.
Kullanımı:
body { background-image: url(‘resim.jpg’); background-attachment: fixed; }
background-position: ResmiHizalamak
Eğer background-repeat özelliğini no-repeat olarak belirlediysek bu kod yardımıyla onun hizalanma şeklini belirleme şansına sahip oluruz.
Kullanımı:
body {
background-image: url(‘resim.jpg’);
background-repeat: no-repeat;
background-position: right top;
}
background: Tek Kodla Arkaplan Belirlemek
Yukarıdaki tüm özellikleri tek bir kodda kullanabiliyoruz. Bunun için kullanacağımız kod: background.
body {
background: #000000 url(‘resim.jpg’) no-repeat right top;
}
Evet arkadaşlar bu yazımda sizlere “CSS ile Arkaplan Örnekleri” hakkında bilgi vermeye çalıştım. Soru ve önerilerinizi yorum olarak ya da e-mail göndererek iletebilirsiniz, teşekkürler.
Kaynak: CSS.sitesi.web.tr
