Yazar: Merhaba değerli web tasarımcılar!
Bu yazımda sizlere css background kullanımından bahsedeceğim.
Html bilgimizden zaten background terimini hatırlıyoruz. şimdi ise css ile background kullanımını ve özelliklerini öğreneceğiz.
Background: bir web sayfanın arka planını renklendirmeyi sağlayan bir etikettir. arkaplanı renklendireceğimiz gibi arkaplanımıza bir resimde ekleyebiliriz.
Background etiketinin alabileceği parametreleri inceleyelim.
background-color : Arka fonun rengini belirler. Css’te renkleri blue, red gibitanımlayabileceğimiz gibi Html kodunu vererek de tanımlayabiliriz.
background-image : Arka fona bir resim dosyası eklemek için kullanılır. url etiketinin içine resim dosyasının yolu ve ismi tam olarak yazılmalıdır.
background-position :
left : Arka fondaki resmin sadece sol tarafta olmasını sağlar.
center : Arka fondaki resmin ortada olmasını sağlar.
right : Arka fondaki resmin sadece sağ tarafta olmasını sağlar.
background-repeat : Arkafondaki resmin tekrarlanması istendiğinde kullanılır.
repeat : Tüm yönlerde tekrar edilmesini sağlar.
repeat-x : X (yatay) yönünde tekrar edilmesini sağlar.
repeat-y : Y (dikey) yönünde tekrar edilmesini sağlar.
no-repeat : Resmin tekrar edilmeyerek bir kere gösterilmesini sağlar.
Background özelliklerini kullanarak bir örnek yapalım.
örnek:
<html>
<head>
<title> css background kullanımı </title>
<style type=”text/css”>
<!–
p {
background-color :#00ff00;
background-image : url (“resim_adi.gif”);
background-position : center;
background-repeat : repeat-y;
}
–>
</style>
</head>
<body>
<p> Bu basit bir örnektir. </p>
</body>
</html>
Bu örneğimizde arkaplanımıza bir renk ve bir resim belirledik, belirlediğimiz resmimizin pozisyonunu center olarak belirledik böylece resim ortalanmış oldu, arkaplan resminide dikey olarak konumlandırmış olduk.
Sizlerde bu örneği inceleyerek kendinize uygun örnekler hazırlayarak bilginizi pekiştirebilirsiniz.
Css background kullanımı ile ilgili benim sizlere anlatacaklarım bu kadardı, soru ve sorunlarınızı yorum olarak bana ulaştırabilirsiniz. iyi bloglamalar herkese.
Bir önceki yazımız olan css text özellikleri ve kullanımı başlıklı makalemizi de okumanızı öneririz.