Zeki Can - WordPress

  CSS

CSS Arkaplan Resmi

CSS derslerimize devam ediyoruz. Css kullanarak arka planımıza resim ayarlamasını yapacağız. İstersek sitemizin tüm arka planını da ayarlayabiliriz. Alttaki kodları inceleyelim.

#kutum {
background-image: url(resim/arkaplan.png);
background-repeat: repeat;
background-attachment: scroll;
background-color: red;
background-position: top-left;
}

Üstteki kodda kutum adlı div’imize backround tanımlamamızı yaptık. Üstte kullandığımız kod sitemizde < div=’kutum’ > seçicisine yukarıda belirttiğimiz özellikleri kazandırır. Bu kodları inceleyelim.

background-image:

Arkaplan resmi olarak ayarlamak istediğimiz resimin url kodunu bu alana yazıyoruz. Resimimiz ‘resim’ klasörünün içinde ve ‘arkaplan.png’ adıyla kayıtlı olarak belirlenmiş. Siz kendi arkaplan resminizin adını ve hangi dosyanızın içine attıysanız onun adını girmelisiniz.

background-repeat:
Bu özellik ile arkaplan resmimizin tekrar edip etmeyeceğini belirleyeceğiz. Şayet arkaplan resmimiz devam edecekse yatay olarak mı yoksa dikey eksende mi edeceğini belirtiriz. Yatay eksen x ile dikey eksen y ile ifade edilecek.

Değerimizin alabileceği değerlere bakalım:

• repeat – Hem yatay olarak hem de dikey olarak tekrar ermesini sağlar bu değer.
• repeat-x – Yatay olarak tekrar ettirir bu değer.
• repeat-y – Aşağı doğru yani dikey olarak tekrar ettirir arkaplanımızı.
• no-repeat – Tekrar ettrimez sadece bir defa gösterilip bitmesini sağlar bu değer.

background-attachment:

Arka planımızın sayfa ile birlikte aşağıya ya da yana kaysın mı yoksa sabit mi kalsın ayarını bu seçenek ile yaparız.

Değerlerimizi inceleyelim:

• scroll – sayfa ile aşağı yukarı  kayar.
• fixed – sabittir.

background-color:

Arkaplan resminin altında kalan alanın rengini belirlememizi sağlar.  Yani arkaplanın rengini belirlediğimiz özelliğimizdir.

background-position:

Arkaplan desenimizin başlayacağı yeri belirtmemize yarayan özelliktir.

Alabileceği değerlere baktığımızda:

• top left – üst sol
• top center – üst orta
• top right – üst sağ
• center left – orta sol
• center center – ekranın ortası (hem üstten hem yandan)
• center right – orta sağ
• bottom left – alt sol
• bottom center – alt orta
• bottom right – alt sağ
• x-% y-% – yüzde olarak sağ/sol ve üst/alt
• x-pos y-pos – x,y koordinatlarına göre

Kodları incelediğimizde farketmişsinizdir. Biraz ingilizcesi olan biri kodların türkçe anlamlarının zaten ne demek istediğinden sonuca varabilir.

Kutum adlı div bölgemiz için değerleri inceledik. Sitemizin arkaplanında uygulamak için css’mizde body kısmına bu özellikleri tanımlamalıyız.

body {
background-image: url(resim/arkaplan.png);
background-repeat: repeat;
background-attachment: scroll;
background-color: black;
background-position: top-left;
}

Üstteki örnekte görüldüğü gibi < body > seçicisine yukarıda belirttiğimiz özellikleri kazandırmış bulunmaktayız.

CSS Dersleri

CSS ye yeni başladıysanız. Önce ne anlama geldiğini öğrenin sıfırdan başlayın.

CSS Nedir?

CSS de Açıklama Bölümleri Yorum Satırları Nasıl Eklenir?

CSS Yorum Satırları Kullanımı

CSS de baş kodlardan olan ID ve Class Kavramları

CSS ID Kullanımı ve CSS Class Kullanımı

  Benzer Yazılar

  Yorumlar

  Kategoriler

  Arama Yap

  Son yorumlar