İlginizi Çekebilir
  1. Ana Sayfa
  2. Css
  3. Css Dersleri – Background Özellikleri

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ğerAçıklma
repeatYatay ve dikey konumda eklenen resmin tekrarlanmasını sağlar default değerdir
repeat-xEklenen resmin X ekseninde tekrarlanmasını sağlar
repeat-yEklenen resmin Y ekseninde tekrarlanmasını sağlar
no-repeatEklenen 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.

Yorum Yap

Kimler Neler Demiş?

Bir Cevap Yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Bildir