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
Javascript if - else - else if çözümlü sorular
Yazıyı Oku

Javascript if - else - else if çözümlü sorular

Css ile kutu modeli oluşturma (box model örneği)
Yazıyı Oku

Css ile kutu modeli oluşturma (box model örneği)

Asp.net ile basit kullanıcı ekleme, listeleme, silme ve güncelleme
Yazıyı Oku

Asp.net ile basit kullanıcı ekleme, listeleme, silme ve güncelleme

Nesne tabanlı programlama uygulamaları (try - catch - finally)
Yazıyı Oku

Nesne tabanlı programlama uygulamaları (try - catch - finally)

Asp.net ile veritabanına bağlanma ve basit kayıt ekleme, listeleme, silme, güncelleme
Yazıyı Oku

Asp.net ile veritabanına bağlanma ve basit kayıt ekleme, listeleme, silme, güncelleme

İnternet programcılığı çerez (cookie), oturum yönetimi (session) ve grafik uygulamaları
Yazıyı Oku

İnternet programcılığı çerez (cookie), oturum yönetimi (session) ve grafik uygulamaları

Menu