CSS лучший подход для 2 фонов? - PullRequest
Новая
       1

CSS лучший подход для 2 фонов?

0 голосов
/ 23 августа 2011

У меня есть дизайн, в котором есть несколько изображений в верхних 25% фона, тогда это просто градиент, который я могу повторить для остальных.

Как лучше всего использовать изображения насверху, затем заполните остальную часть страницы градиентом?

Я выбрал такой подход: 

html{
    background: #cac2ac url("../img/body-bg.gif") repeat-y 50% 0;
}

body {
    text-align: center;
    font-family: Arial;
    line-height: 1;
    width: 100%;
    background: transparent url("../img/body-img-bg.jpg") no-repeat 50% 24px;
}

Но в одной реализации кода фоновое изображение для HTML не появляется?

Любая помощь?

Ответы [ 3 ]

3 голосов
/ 23 августа 2011

Вопреки сказанному, у вас может есть фон для html.

Ваш подход почти у цели, попробуйте это с height: 100% и min-height: 100%.

http://jsbin.com/omikuy

html, body {
    margin: 0;
    padding: 0;
}
html {
    background: #cac2ac url("../img/body-bg.gif") repeat-y 50% 0;
    height: 100%;
}
body {
    min-height: 100%;
    text-align: center;
    font-family: Arial;
    line-height: 1;
    width: 100%;
    background: transparent url("../img/body-img-bg.jpg") no-repeat 50% 24px;
}
1 голос
/ 23 августа 2011

Кросс-браузер, но не семантический

Самым кросс-браузерным решением будет иметь обертку <div> для всего контента на сайте, а затем применить один фон к нему и один к телу.

Меньше кросс-браузер, но более семантический

Вы также можете попробовать использовать элементы psuedo для применения одного фона: 

body:after { background: .... }

Наименее кросс-браузер, но наиболее семантический

Самый прогрессивный способ - использовать несколько фонов в CSS3 

body { background: url(...) top center, url(...) top center repeat-y }
0 голосов
/ 23 августа 2011

Лучший способ сделать это - создать фоновый градиент для тела и просто создать div для изображений со следующим классом: 

.div_bg {

position:absolute;
width:100%;
height:100px; (or whatever)
top:0px;
background-image:whatever; 
repeat:repeat-x;

}

И убедиться, что HTMl имеет это (для выделения белого цвета).пробел сверху): 

html {
margin: 0 auto;
}
...