Anasayfa / Web Tasarım / Css / CSS’ DE ZEMİN ÖZELLİKLERİ

CSS’ DE ZEMİN ÖZELLİKLERİ

Merhaba arkadaşlar. Bu makalemizde sizlere yaptığımız projenin zemin kısmını düzenlemek için kullanılacak css kodlarından bahsedeceğiz. Css öğrenen birçok kişi css kullanarak ilk olarak aşağıda açıkladığımız kodlardan birini veya birkaçını kullanarak başlamıştır bu işe. Yani sizlere bu makalede temel olarak kullanılan kodlardan bahsetmeye çalıştık. Bu kodlar ;

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

Background-color: Nesnelerin ( Etiketlerin ) zeminine renk atamak için kullanılır. Örnek olarak ise;
p{ background-color:#C8C8C8 } yaptığımızda seçtiğimiz paragraf #C8C8C8 rengini alacaktır.
Renkleri 5 farklı şekilde yazabilirsiniz;

1)  #123456
2)  #123
3)  Red
4)  background-color: rgb(255,255,51)
5)  background-color: rgb(60%,0%,0%)


şeklinde olmalıdır.

Background-image: Nesnelerin( Etiketlerin ) zeminine resim eklemek için kullanılır. Şu şekilde kullanılır;

Kullandığınız etiket
{Background-image:url(resmin adresi/resmin adı ve uzantısı) }

Mesela Kullandığınız etiket{background-image:url(resimler/arka.jpg)}

NOT: Kullandığınız etiketten kastım body, div, table gibi etiketler.

Background-repeat: Eğer nesnelere eklediğiniz resimler tam olarak sığmıyorsa tekrarlansın yada tekrarlanmasın özelliğidir. Tekrarlanıyorsa hangi yönde olduğunu da belirtmeniz gerekir.

  • No Repeat: Tekrarlama
  • Repeat:Dikeyde ve Yatayda Tekrarla
  • Repeat-x: Yatayda Tekrarla
  • Repeat-y: Dikeyde Tekrarla

Kod ile yazarken şu şekilde kullanılır;

{
background-repeat:repeat-x;
}

Background-position: Nesnelere eklediğiniz resmin yönünü seçmenizi sağlar. Bu yönler;

  • top-left: sol üste
  • center-left: ortanın sol tarafında
  • bottom-left: sol aşağıda
  • center-right: ortanın sağ tarafında
  • bottom-center: ortada aşağıya yapışık
  • top-center: ortada üste yapışık
  • center-center: tam ortada
  • top-right: sağ üste
  • bottom-right: sağ aşağıda

Bunların yanında değişik tarzda değerde verebilirsiniz.

Kod ile yazarken mesela bir resme yön vermek istiyorsak;

{
background-image: url (resimler/arka.jpg);
background-repeat: no-repeat;
background-position: top-left;
}


olarak yazılır.

Background attachment: Bu özellikle de nesneye eklenen resmin sayfa ile scroll etmesini ya da sayfanın zeminde çakılı kalmasını sağlar.
Yani Scroll yaptığınızda siz aşağıya inseniz bile resim sizinle beraber inmeyecektir fakat Fixed yaptığımıda resim sizinle beraber aşağıya gelecektir.

Scroll Örneği;
Fotoğraflarda resim eklediğim gözükmüyor fakat resim eklemelisiniz ve repeat-x yapmalısınız.

Yani kod olarak yazarsak eğer;
{
background-image:url (resimler/arka.jpg);
background-repeat:repeat-x;
background-attachment:scroll;
}

Resim belli olsun diye böyle çektim daha da aşağıya gitseydim eğer fotoğraf görülmeyecekdi.

Fixed Örneği;
Kod olarak şu şekildedir:
{
background-image:url (resimler/arka.jpg);
background-attachment:fixed;
}

Aşağıya inmeme rağmen resim sayfaya çakılı olduğu için benimle birlikte aşağıya geliyor.
Deneyin sizde göreceksiniz

Bir sonraki yazımızda görüşmek üzere…

Hakkında

Check Also

web-gemisi

CSS Temel Yapısı ve Nitelik Seçicileri 1. Kısım (Ders 2)

Nitelik Seçicileri Html etiketlerinin istenen parametresinin istenen değere sahip olduğu durumlarda css kodlarının devreye girmesini …

Bir cevap yazın

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