Web tasarım ve programlama dersi için stil şablonu (css) kullanarak background komutunun kullanılması uygulamasıdır.

Css ile çoklu arkaplan uygulaması

Css3 ile birlikte gelen background komutunun çoklu arkaplan desteğinin tarayıcı içerisinde kullanımını öğreneceğiz.

Html dosyamızın kodlarını aşağıda verildiği şekilde hazırlıyoruz. index.html olarak kaydediyoruz.

<!DOCTYPE html>
  <html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>css ile çoklu arkaplan</title>
   <link rel="stylesheet" href="cokluarkaplan.css">
  </head>

 <body>
   <div class="arkaplan">
   <h3>CSS Backgrounds</h3>
   <p>CSS3 contains a few new background properties, which allow greater control of the background element.</p>
   <p>In this chapter you will learn how to add multiple background images to one element.</p>
   <p>You will also learn about the following new CSS3 properties:</p>
   </div>
</body>
</html>

Sayfamızda kullanacağımız css dosyası ve kodlarını aşağıdaki gibi yazıyoruz. Css dosyamıza cokluarkaplan.css adını veriyoruz.

Yukarıdaki resimleri farklı kaydet diyerek html ve css dosyasının yanına kaydediniz.

Background komutunun url bölümü ile img_flwr.gif dosyasının konumunu belirtip, no-repeat ile bir defa gösterip, bottom right ile sağ alt köşeye yerleşimini yaptık. Virgülden sonraki kısımda ise paper.gif resmini div'in içerisini dolduracak şekilde repeat komutu ile kullandık.

div {
padding:15px 15px;
margin:10px;
width: 850px;
background:url('img_flwr.gif') no-repeat bottom right,
                    url('paper.gif') repeat;  }
p { font:normal 14px Century gothic; }
  • Yazı Etiketleri :
  • css çoklu arkaplan
  • arkaplan resmi css3
Css ile yatay ve dikey menu oluşturma, kutu modeli içerisinde kullanma
Yazıyı Oku

Css ile yatay ve dikey menu oluşturma, kutu modeli içerisinde kullanma

Css ile position: fixed kullanımı
Yazıyı Oku

Css ile position: fixed kullanımı

Css kutu modeli örneği ve float
Yazıyı Oku

Css kutu modeli örneği ve float

Nesne tabanlı programlama metot çağırma uygulamaları
Yazıyı Oku

Nesne tabanlı programlama metot çağırma uygulamaları

Css kutu modeli örneği ve konumlandırma
Yazıyı Oku

Css kutu modeli örneği ve konumlandırma

Fare tıklamasını takip eden nesne - AS2 ile
Yazıyı Oku

Fare tıklamasını takip eden nesne - AS2 ile

Menu