2011-08-07 6 views
22
body{ 
padding:0; 
margin:0; 
font:normal 12px/16px Arial, Helvetica, sans-serif; 
color:#383634; 
background-image: -webkit-gradient(
linear, 
left top, 
left bottom, 
color-stop(0.18, rgb(74,12,107)), 
color-stop(0.87, rgb(102,153,102)) 
); 
background: -moz-linear-gradient(top, #4a0c6b 0%, #669966 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4a0c6b),   color-stop(100%,#669966)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #4a0c6b 0%,#669966 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #4a0c6b 0%,#669966 100%); /* Opera11.10+ */ 
background: -ms-linear-gradient(top, #4a0c6b 0%,#669966 100%); /* IE10+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4a0c6b', endColorstr='#669966',GradientType=0); /* IE6-9 */ 
background: linear-gradient(top, #4a0c6b 0%,#669966 100%); /* W3C */ 

यह नीचे रास्ते का सबसे आयेगी, तब दोहरातामेरे सीएसएस ढाल खिंचाव नहीं है, यह दोहराता

उत्तर

53

आपका मूल कोड: http://jsfiddle.net/ecKR4/7/

यदि आप चाहते हैं पूरी ऊंचाई फैलाने के लिए ढाल

html { 
    min-height: 100% 
} 

थोड़ा सामग्री के साथ: http://jsfiddle.net/ecKR4/1/
पेज के 210 सामग्री के बहुत सारे के साथ: http://jsfiddle.net/ecKR4/2/

आप ढाल तय की और व्यूपोर्ट के रूप में उच्च किया जा करना चाहते हैं:

html { 
    height: 100% 
} 
body { 
    background-attachment: fixed 
} 

थोड़ा सामग्री के साथ: http://jsfiddle.net/ecKR4/4/

: http://jsfiddle.net/ecKR4/3/
सामग्री के बहुत सारे के साथ

यदि आप चाहते हैं कि ढाल व्यूपोर्ट के रूप में उच्च हो, और फिर पृष्ठभूमि रंग:

html { 
    height: 100% 
} 
body { 
    background-repeat: no-repeat; 
    background-color: #669966; /* ending colour of gradient */ 
} 

थोड़ा सामग्री के साथ: http://jsfiddle.net/ecKR4/5/
सामग्री के बहुत सारे के साथ: http://jsfiddle.net/ecKR4/6/

+2

आप मेरे हीरो रहे हैं! "न्यूनतम ऊंचाई" के लिए – Mike

+2

+1। मैं "ऊंचाई" का उपयोग कर रहा था और यह सभी ब्राउज़रों पर काम नहीं कर सका। धन्यवाद! – Paul

+1

इतनी शानदार सरल –

संबंधित मुद्दे