Eski Tarayıcı Desteği
Daha eski tarayıcı desteği bir zorunluluksa, birden fazla arka plan veya degradeyle gidemezseniz, muhtemelen yedek bir divöğede böyle bir şey yapmak isteyeceksiniz :
#background {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink;
}
Örnek: http://jsfiddle.net/PLfLW/1704/
Çözüm, ekranın yarısını dolduran ekstra sabit bir div kullanır. Düzeltildiğinden, kullanıcılarınız kaydırıldığında bile yerinde kalacaktır. Diğer öğelerinizin arka plan div'in üstünde olduğundan emin olmak için daha sonra bazı z dizinleriyle uğraşmanız gerekebilir, ancak çok karmaşık olmamalıdır.
Sorun yaşarsanız, içeriğinizin geri kalanının arka plan öğesinden daha yüksek bir z-endeksine sahip olduğundan emin olun ve gitmek için iyi olmalısınız.
Modern Tarayıcılar
Daha yeni tarayıcılar tek endişenizse, kullanabileceğiniz birkaç yöntem daha vardır:
Doğrusal Degrade:
Bu kesinlikle en kolay çözümdür. Çeşitli efektler için gövdenin background özelliğinde doğrusal bir gradyan kullanabilirsiniz.
body {
height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}
Bu, her renk için% 50'de kesin bir kesintiye neden olur, bu nedenle adından da anlaşılacağı gibi bir "gradyan" yoktur. Elde edebileceğiniz farklı efektleri görmek için stilin "% 50" parçasını denemeyi deneyin.
Örnek: http://jsfiddle.net/v14m59pq/2/
Arka plan boyutuna sahip birden çok Arkaplan:
Öğeye arka plan rengi htmluygulayabilir ve sonra öğeye arka plan görüntüsü uygulayabilir bodyve background-sizeözelliği sayfa genişliğinin% 50'sine ayarlamak için bu özelliği kullanabilirsiniz . Bu benzer bir etkiyle sonuçlanır, ancak gerçekten sadece bir veya iki görüntü kullanıyorsanız gradyanlar üzerinde kullanılır.
html {
height: 100%;
background-color: cyan;
}
body {
height: 100%;
background-image: url('http://i.imgur.com/9HMnxKs.png');
background-repeat: repeat-y;
background-size: 50% auto;
}
Örnek: http://jsfiddle.net/6vhshyxg/2/
EKSTRA NOT: Son örneklerde hem htmlve bodyöğelerinin de ayarlandığına dikkat edin height: 100%. Bu, içeriğiniz sayfadan daha küçük olsa bile, arka planın en azından kullanıcının görünüm alanının yüksekliğinde olmasını sağlamak içindir. Açık yükseklik olmadan, arka plan efekti yalnızca sayfa içeriğinize kadar düşer. Aynı zamanda genel olarak iyi bir uygulamadır.
