CSS Serisi – 3) CSS Örnekleri 1.1 Arkaplanlar

1.228 kez okundu

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.

wordle-css

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:

  1. no-repeat : Tekrar edilmeyecektir
  2. repeat : Tekrarlanacaktır / döşenecektir
  3. repeat-x : Sadece sağa doğru tekrar edecektir
  4. 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

 

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Time limit is exhausted. Please reload CAPTCHA.

Tipobe365 Giriş