Css Dersleri – Background Özellikleri

Sayfadaki nesnelere zemin rengi verme, arka plana resim ekleme veya bu olayların nasıl davranışlar sergileyeceklerini belirleyen parametredir.
Genel kullanımı:
seçici {background: color image repeat attachment background-position;}
şeklindedir. Özellikleri tek satırda verebileceğiniz gibi ayrı ayrıda tanımlayabilirsiniz. Şimdi sırayla css backgorund(zemin) özelliklerini ve alabileceği değerleri inceleyelim

background-color

Sayfanın zemin rengini belirlemek için kullanılır. Renk değeri renklerin ingilizce isimleri, RGB değeri veya 16’lık sayı sistemindeki kod karşılığı da olabilir.
Renk Tablosu ve Değerleri

  • aquaaqua = #00ffff = rgb(0,255,255)
  • Siyahblack = #000000 = rgb(0,0,0)
  • Maviblue = #0000ff = rgb(0,0,255)
  • fuchsiafuchsia = #ff00ff = rgb(255,0,255)
  • grigray = #808080 = rgb(128,128,128)
  • yeşilgreen = #008000 = rgb(0,128,0)
  • Kireçlime = #00ff00 = rgb(0,255,0)
  • Kestanemaroon = #800000 = rgb(128,0,0)
  • lacivertnavy = #000080 = rgb(0,0,128)
  • oliveolive = #808000 = rgb(128,128,0)
  • truncuorange = #ffa500 = rgb(255,165,0)
  • morpurple = #800080 = rgb(128,0,128)
  • kırmızıred = #ff0000 = rgb(255,0,0)
  • gümüşsilver = #c0c0c0 = rgb(192,192,192)
  • turkuazteal = #008080 = rgb(0,128,128)
  • beyazwhite = #ffffff = rgb(255,255,255)
  • sarıyellow = #ffff00 = rgb(255,255,0)

Kullanım Örneği

body {
background-color: yellow;
}
h1 {
background-color: #00ff00;
}
p {
background-color: rgb(255,0,255);
}

background-image

Kullanıldığı nesnenin arka planına resim eklemek için kullanılır.
Kullanım Örneği

body {
background-image: url("resim.jpg");
background-color: #cccccc;
}

background-repeat

Arka plana eklenen resmin tekrarlanma biçimi ayarlamak için kullanılır.
Kullanım Örneği

body {
background-image: url("resim.jpg);
background-repeat: repeat-x;
}
Değer Açıklma
repeat Yatay ve dikey konumda eklenen resmin tekrarlanmasını sağlar default değerdir
repeat-x Eklenen resmin X ekseninde tekrarlanmasını sağlar
repeat-y Eklenen resmin Y ekseninde tekrarlanmasını sağlar
no-repeat Eklenen resmin tekarsız bir şekilde ekranda bir kere görüntülenmesi sağlar

background-attachment

Sayfaya eklenen arkaplanın kaydırma çubuğu ile hareket edip etmeyeceğini ayarlar. Default değeri “scroll”‘dur . Scroll ve Fixed değerlerini alabilir. Scroll olduğu zaman kaydırma çubuğu ile hareket eder, fixed seçildiği zaman resim sayfada sabit kalır.
Kullanım Örneği

<html>
<head>
<title>www.bilisimogretmeni.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-attachment: scroll;
background-image: url("resim.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
</body>
</html>                 

Fixed kullanımı

<html>
<head>
<title>www.bilisimogretmeni.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-attachment: fixed;
background-image: url("resim.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
</body>
</html>                 

background-position

Zemin olarak ayarlanan resmin hangi pozisyondan itibaren görüntüleneceğini ayarlar. Alabileceği Değerler
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%
xpos ypos

Kullanım örneği

body { 
background-image: url('resim.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;}

resim.jpg dosyası sayfanın ortasında yer alır.

Şimdilik bu kadar bundan sonraki konuda CSS Font ve Tezt özelliklerinden bahsedeceğiz.

X

Pin It on Pinterest

X