Var

body {
    background: url(images/background.svg);
}

İstenen etkiyi bu arka plan görüntüsü sayfasına eşit, yükseklik değiştirme oranı korumak için eksik olacaktır. orijinal resmin 100*200 (herhangi bir birim) olur ve vücut 600px genişliğinde örneğin, arka plan görüntüsü 1200px yüksek olmuyor. Yükseklik eğer pencere yeniden boyutlandırıldığında otomatik olarak değiştirmek gerekir. Bu mümkün mü?

Şu anda Firefox yüksekliği uygun bir hale getirilmesi ve daha sonra genişliği ayarlama gibi görünüyor. Yüksekliği en uzun boyut ve kırpma önlemek için çalışıyoruz, çünkü bu belki de? Benistiyorumdikey olarak kırpmak için, kaydırma: hayır yatay tekrarlayın.

Ayrıca, Krom zaten varsayılan olarak Merkezi, background-repeat:repeat açıkça belirtilmiş olan bile yok tekrar ediyorum, görüntü çiziyor.

Bu, background-size (compatibility check) olmak üzere CSS3 bir özelliği var. Bir uzunluk değerlerini ayarlamak mümkün olmakla birlikte, genellikle özel değerleri contain cover ile kullanılır. Belirli bir durumda cover kullanmanız gerekir:

body {
    background-image:  url(images/background.svg);
    background-size:   cover;                      /* <------ */
    background-repeat: no-repeat;
    background-position: center center;            /* optionally, center the image */
}

contain cover Eggsplanation

Kötü espri için özür dilerim, ama gösteri için picture of the day by Biswarup Ganguly kullanacağım. Bu ekran olduğunu söylemek sağlar, ve gri alanı görünür ekran dışında. Gösteri için, 16x9 oranı kabul edeceğim.

Bir arka plan olarak günün sözü geçen resim kullanmak istiyoruz. Ancak nedense 4x3 görüntü biz kırpılmış. Bazı sabit uzunlukta background-size özelliği çıkartabiliriz, ama contain cover odaklanacağız. Ben de body genişlik ve/veya yükseklik bozmak istemedik varsayalım unutmayın.

contain

contain

İç görünüm oranını (varsa), hem de genişliği gibi en büyük boyutu koruyarak, görüntü ölçek, yüksekliği arka plan konumlandırma alanı içinde uygun olabilir.

Bu arka plan görüntüsü her zaman tamamen arka plan konumlandırma alanında yer alıyor, ancak, bu durumda biraz boş alan ile background-color dolu olabilir

cover

cover

İç görünüm oranını (varsa), hem de genişliği gibi küçük boyutu ve koruyarak, görüntü ölçek, yüksekliği tamamen arka plan konumlandırma alanı kapsayacak.

Bu arka plan görüntüsü her şeyi kapsayan kesinleştirir. Hiçbir görünür background-color, ancak resmin büyük bir kısmı kesilmiş olabilir ekran oranına bağlı olacaktır