3
html,body{
    background: linear-gradient(to right top, #336e7b 0%, #8e44ad 50%, #e74c3c 100%) repeat scroll 0 0 #abb7b7;
    margin:0;
    padding:0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

JSFiddle: http://jsfiddle.net/losiuhoi/1ujk40wh/1/

How can I set the background of body to 100% height?

Eric Lo
  • 99
  • 9

2 Answers2

3

Set height of the body to 100%, otherwise it takes only as much as it's necessary for content (.msg div).

html, body {
    height: 100%;
}

Demo: http://jsfiddle.net/dfsq/1ujk40wh/2/

dfsq
  • 191,768
  • 25
  • 236
  • 258
  • If I set the height of ".msg" class to 2000px, how can I extend the background(no-repeat)? – Eric Lo Aug 27 '14 at 07:42
  • Maybe `fixed` http://stackoverflow.com/questions/2869212/css3-gradient-background-set-on-body-doesnt-stretch-but-instead-repeats – dfsq Aug 27 '14 at 09:19
0

If I'm understanding your question correctly, you can just place height: 100% inside the body...

http://jsfiddle.net/go5htxj7/

user2635088
  • 1,598
  • 1
  • 24
  • 43