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.