CSS3 - Çoklu Arkaplan
Çoklu Arkaplan
CSS Çoklu arkaplan özelliği, HTML kodu olmadan bir seferde bir veya daha fazla resim eklemek için kullanılır, Gereksinimimize göre resim ekleyebiliriz.Çoklu arkaplan resimlerinin örnek bir sözdizimi aşağıdaki gibidir -
#multibackground {
background-image: url(/css/images/logo.png), url(/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}En sık kullanılan değerler aşağıda gösterilmektedir -
| Sr.No. | Değer ve Açıklama |
|---|---|
| 1 | background Tüm arka plan görüntüsü özelliklerini tek bir bölümde ayarlamak için kullanılır |
| 2 | background-clip Arka planın boyama alanını bildirmek için kullanılır |
| 3 | background-image Arka plan resmini belirtmek için kullanılır |
| 4 | background-origin Arka plan resimlerinin konumunu belirtmek için kullanılır |
| 5 | background-size Arka plan resimlerinin boyutunu belirtmek için kullanılır |
Misal
Aşağıda, çoklu arka plan görüntülerini gösteren örnek yer almaktadır.
<html>
<head>
<style>
#multibackground {
background-image: url(/css/images/logo.png), url(/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
</style>
</head>
<body>
<div id = "multibackground">
<h1>www.tutorialspoint.com</h1>
<p>
Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new
skills at their own pace from the comforts of their drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and elated
by the response it generated, we worked our way to adding fresh tutorials
to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web designing
to academics and much more..
</p>
</div>
</body>
</html>Aşağıdaki sonucu verecektir -
Çoklu arkaplanın boyutu
Farklı resimler için farklı boyutlar eklemek için çoklu arkaplan özelliği kabul edilir.Örnek bir sözdizimi aşağıda gösterildiği gibidir -
#multibackground {
background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat;
background-size: 50px, 130px, auto;
}Yukarıda bir örnekte gösterildiği gibi, her görüntünün 50px, 130px ve otomatik boyut gibi belirli boyutları vardır.