Web tasarım ve programlama dersi için stil şablonu (css) kullanarak background komutunun kullanılması uygulamasıdır.
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; }