Div, Table vb. Nesnelere Arkaplan

Haziran 18th, 2008 | Ali BARIN | (x)HTML - Css | Yorum yok |

CSS background (arkaplan) özelliği html sitemizde istediğimiz çoğu kodda kullanabiliceğimiz bir özelliktir. Background’ın tamtamına bildiğim 5 tane özelliği var. Bunlar;

  • Background-image
  • Background-color
  • Background-attachment
  • Background-repeat
  • Background-position

Background-image, Background-color ve Background-repeat

Şimdi bir tane div hazırlayalım. Sonrada div nesnesine arkaplan rengi ekleyelim. Div imize class değeri atıyalım. Class değeri example olsun.

<div class="example">Example class lı div imiz...</div>
.example {
background: #000; }

bu stil şablonu sayesinde example class lı div’imizin arkaplan rengi simsiyah olucak.

.example {
background: url('images/examplebg.gif');
width: 40px;/*en*/
height: 50px;/*boy*/
color:white; }

bu şablonda arkaplanda tekrarlanan examplebg.gif resmi olucaktır. Div in boyutları ise en: 40px boy: 50px

Önizleme:

Örnek Div
.example {
background: url('images/examplebg.gif') #39c no-repeat;
width:40px;
height:50px;
color:white; }

bu şablonda üsttekiyle aynı fakat aralarında 2 fark var. Bu stil şablonunda arkaplan rengi açık mavi ve arkaplan resmi birkez gösterilicek.

Önizleme:

Örnek Div 2

NOT: Üstteki background bölümünde no-repeat yerine repeat-y yazılırsa arkaplan resmi dikeylemesine tekrarlanırken repeat-x yazılırsa yataylamasına tekrarlanır. Eğer silerseniz arkaplan resmi hem dikeylemesine hemde yataylamasına tekrarlanıcaktır.

Background-attachment

Background-attachment, arkaplan sabitleme kodudur. Bu kodlar body ‘e arkaplan resmi eklediğimizde resmin sabit kalacağını veya scrollla sayfağı aşağı indirdiğimizde resminde iniceğini belirleriz.

body{
background: url('images/examplebg.gif') no-repeat;
background-attachment: fixed; }

Bu stilde arkaplan resmi sabit kalıcaktır. Scroll u aşağı indirdiğimizde resim sayfanın neresindeyse orada kalıcaktır ve oynamıcaktır. Eğer değeri scroll yaparsak arkaplan resmi hangi sayfadaysak oraya gelicektir.

Background-position

Bu kod sayesinde arkaplan resmimizin sayfanın veya hangi nesneye arkaplan eklediysek o nesnenin neresinde bulunucağını belirleriz. Bu koda verebiliceğimiz 6+4 değer var. 7 Ana değer ve 4 köşe değer olmak olarak ayırdım ben bunları kendimce :) . 6 Ana değer şunlar; top,center,bottom,left,right,inherit. Köşe değerler ise top-left(sol üst), top-right(sağ üst), bottom-left(sol alt), bottom-right(sağ alt) olmak üzerek 4 tanedir.

body {
background: url('images/examplebg.gif') no-repeat;
background-position: top right; }

   Yorum yazın.