CSS Meilleure approche pour 2 arrière-plans?

Question

J'ai un design qui a quelques images sur les 25% de l'arrière-plan alors c'est juste un simple dégradé que je peux répéter pour le reste.

Quelle est la meilleure approche pour avoir les images sur le dessus, puis complétez le reste de la page avec le dégradé?

Je pris cette approche:

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; 
} 

Mais dans une mise en œuvre du code de l'image d'arrière-plan HTML n'apparaît pas?

Une aide?

Answer 1

Contrar y à ce qui a été dit, vous pouvez avoir un fond pour html. Votre approche est presque là, essayez avec height: 100% et 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; 
} 

Answer 2

La meilleure façon de le faire serait d'avoir l'arrière-plan du corps dégradé et il suffit de créer un div pour les images avec la classe suivante:

.div_bg { 

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

} 

Et assurez-vous que HTML a ce (à elimate espace blanc sur le dessus):

html { 
margin: 0 auto; 
} 

Answer 3

browser Cross, mais pas sémantique

La solution la plus multi-navigateur serait d'avoir une enveloppe <div> autour de tous les c sur le site Web, puis appliquer un arrière-plan à celui-ci, et un au corps.

Moins Cross navigateur, mais plus sémantique

Vous pouvez également essayer d'utiliser des éléments de Psuedo pour appliquer un fond:

body:after { background: .... } 

moins Browser Cross, mais la plupart sémantique

La façon la plus progressive est utiliser plusieurs arrière-plans dans CSS3

body { background: url(...) top center, url(...) top center repeat-y }