CSS Arka Planları
Css arka plan özellikleri belirlediğiniz elementin arka plan efektlerini tanımlar.
CSS Arka Plan Özellikleri
CSS arka plan özellikleri sayesinde, HTML sayfamıza yerleştireceğimiz resim ya da rengi istediğimiz gibi ve kolaylıkla özelleştirebiliriz.
Örnekler
Arka Plan Rengi
<html>
<body>
<style type="text/css">
body {background-color: tan}
h1.bir {background-color: maroon}
p {background-color: Bisque}
</style>
<h1 class="bir"> Bu Birinci Baslik </h1>
<h2>Bu Ikinci Baslik</h2>
<p> Bu bir paragraf </p>
</html>
</body>
Arka Plan Resmi
<html>
<body>
<style type="text/css">
body {background-image:url("1.jpg")}
h1.bir {background-color: maroon}
p {background-color: Bisque}
</style>
<h1 class="bir"> Bu Birinci Baslik </h1>
<h2>Bu Ikinci Baslik</h2>
<p> Bu bir paragraf </p>
</html>
</body>
Tekrarsız Arka Plan Resmi
NOT: Normalde yukarıdaki html dosyası sayfanın büyüklüğü, arka plan resminin büyüklüğünü geçerse aynı resmi tekrar ediyor. Eğer bu tekrarları kontrol etmek istiyorsanız yapmanız gerekeni aşağıdaki örnekten öğrenebilirsiniz.
<html>
<body>
<style type="text/css">
body {background-image:url("1.jpg");background-repeat:no-repeat}
h1.bir {background-color: maroon}
p {background-color: Bisque}
</style>
<h1 class="bir"> Bu Birinci Baslik </h1>
<h2>Bu Ikinci Baslik</h2>
<p> Bu bir paragraf </p>
</html>
</body>
Dikey Tekrarlı Arka Plan Resmi
<html>
<body>
<style type="text/css">
body {background-image:url("1.jpg");background-repeat:repeat-y}
h1.bir {background-color: maroon}
p {background-color: Bisque}
</style>
<h1 class="bir"> Bu Birinci Baslik </h1>
<h2>Bu Ikinci Baslik</h2>
<p> Bu bir paragraf </p>
</html>
</body>
Yatay Tekrarlı Arka Plan Resmi
<html>
<body>
<style type="text/css">
body {background-image:url("1.jpg");background-repeat:repeat-x}
h1.bir {background-color: maroon}
p {background-color: Bisque}
</style>
<h1 class="bir"> Bu Birinci Baslik </h1>
<h2>Bu Ikinci Baslik</h2>
<p> Bu bir paragraf </p>
</html>
</body>
Arka Plan Resmini İstediğin Yere Koyma
<html>
<body>
<style type="text/css">
body {background-color: tan; background-image:url("2.jpg");background-repeat:no-repeat;background-attachment: fixed;background-position: center}
h1.bir {background-color: maroon}
p {background-color: Bisque}
</style>
<h1 class="bir"> Bu Birinci Baslik </h1>
<h2>Bu Ikinci Baslik</h2>
<p> Bu bir paragraf </p>
</html>
</body>
Yüzdeler ile Arka Plan Resminin Konumu Belirleme
<html>
<body>
<style type="text/css">
body {background-color: tan; background-image:url("2.jpg");background-repeat:no-repeat;background-attachment: fixed;background-position: 25% 60%}
h1.bir {background-color: maroon}
p {background-color: Bisque}
</style>
<h1 class="bir"> Bu Birinci Baslik </h1>
<h2>Bu Ikinci Baslik</h2>
<p> Bu bir paragraf </p>
</html>
</body>
Sabit Konumlu Arka Plan Resmi
Üzerinde durduğumuz örneklerin bir çoğunda backgroud-attachment: fixed parametresini kullandık. Bu parametre sayesinde sayfayı aşağıya kaydırsanız dahi eklediğiniz resim aynı yerde kalacaktır. Bu durumu denemek için en son yazdığımız komuta bir sürü <br> komutu ekleyelim ve sonucu görelim.
<html>
<body>
<style type="text/css">
body {background-color: tan; background-image:url("2.jpg");background-repeat:no-repeat;background-attachment: fixed;background-position: 50px 150px}
h1.bir {background-color: maroon}
p {background-color: Bisque}
</style>
<h1 class="bir"> Bu Birinci Baslik </h1>
<h2>Bu Ikinci Baslik</h2>
<p> Bu bir paragraf </p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</html>
</body>
Sonraki ders için tıklayınız...
Copyright © 2005 Uzerine.com