CSS Arkaplan Resmini Boyutlandırma
Yeniden merhabalar.. Bu yazıda arkaplan resimlerimizi boyutlandırmayı, bir içeriğe birden fazla arkaplan dahil etme konularını ele alacağız.
CSS3 ile gelen background-size özelliği arkaplanlarımızı boyutlandırmamızı olanak sağlıyor. Background-size özelliği resim editörlerine olan bağlılığı bir nebze azalttı. Background-size değerlerini px, em veya % girerek arkaplanımızı istediğimiz boyutlara uygun hale getirebiliriz.
Pixel ve yüzdeler haricinde contain, cover ve auto değerlerini kullanabiliriz. Contain, arkaplan resmimizi belirlediğimiz içerik alanına sığacak şekilde boyutlandırır. Resmimizin her bir pixeli görünür. Resmimiz en veya boy olarak bulunduğu içeriğin en veya boyundan birine bile erişirse, boyutlandırma durur. Bu değere arkaplan resmimizde bütün pixellerimizi korumamızı sağlar.
Cover değeri arkaplan resmimizi içeriğin tamamına göre kaplar. Arkaplan resmimizin bazı noktalarını göremeyebiliriz.
Yüksek en ve boya sahip arkaplan resimlerimizde, arkaplan büyüklüğünden dolayı ortaya çıkan kaydırma çubuğunu görmek istemiyorsak, Cover kullanarak bunu engelleyebiliriz. Cover resmimizi pencereyi kapsayacak şekilde boyutlandırabilir, böylelikle kaydırma çubuğunun ortaya çıkmasını engeller.
Auto değeri ile arkaplan resmimize hiçbir değişiklikte bulunmuyoruz. Yukarıdaki örneklerde birinci divlere background-size değişikliği uygulamadım. Background-size ekleyip auto değerini verin. Bunu contain ve cover değeri ile karşılaştırın.
Background ve background-size değelerini kullanarak birden fazla arkaplan ekleme, eklenen arkaplanları konumlandırma işlemi yapabiliriz.
CSS3 ile gelen background-size özelliği arkaplanlarımızı boyutlandırmamızı olanak sağlıyor. Background-size özelliği resim editörlerine olan bağlılığı bir nebze azalttı. Background-size değerlerini px, em veya % girerek arkaplanımızı istediğimiz boyutlara uygun hale getirebiliriz.
Pixel ve yüzdeler haricinde contain, cover ve auto değerlerini kullanabiliriz. Contain, arkaplan resmimizi belirlediğimiz içerik alanına sığacak şekilde boyutlandırır. Resmimizin her bir pixeli görünür. Resmimiz en veya boy olarak bulunduğu içeriğin en veya boyundan birine bile erişirse, boyutlandırma durur. Bu değere arkaplan resmimizde bütün pixellerimizi korumamızı sağlar.
Cover değeri arkaplan resmimizi içeriğin tamamına göre kaplar. Arkaplan resmimizin bazı noktalarını göremeyebiliriz.
Yüksek en ve boya sahip arkaplan resimlerimizde, arkaplan büyüklüğünden dolayı ortaya çıkan kaydırma çubuğunu görmek istemiyorsak, Cover kullanarak bunu engelleyebiliriz. Cover resmimizi pencereyi kapsayacak şekilde boyutlandırabilir, böylelikle kaydırma çubuğunun ortaya çıkmasını engeller.
Auto değeri ile arkaplan resmimize hiçbir değişiklikte bulunmuyoruz. Yukarıdaki örneklerde birinci divlere background-size değişikliği uygulamadım. Background-size ekleyip auto değerini verin. Bunu contain ve cover değeri ile karşılaştırın.
Background ve background-size değelerini kullanarak birden fazla arkaplan ekleme, eklenen arkaplanları konumlandırma işlemi yapabiliriz.
Yorumlar
Yorum Gönder