DannyGolden Posted November 11, 2011 Share Posted November 11, 2011 Hey all, I'm getting this weird issue in Chrome when I try to apply any sort of gradient. The gradient will only extend the length of the content and not finish the entire page out. I believe my syntax is correct and all but if I just have my logic wrong please tell me. (: Here is what I mean:http://i41.tinypic.com/httf01.jpg Here is my CSS: body {background: #3B3734;background: -webkit-linear-gradient(top, #5c5b51 0%,#262622 100%); /* Chrome10+,Safari5.1+ */color: #FFFAF6;font-family: Helvetica, Arial, Sans-Serif;} Link to comment Share on other sites More sharing options...
Ingolme Posted November 11, 2011 Share Posted November 11, 2011 Apply the gradient to the <html> element instead. The <body> only does stretch out to fit the content. Link to comment Share on other sites More sharing options...
DannyGolden Posted November 11, 2011 Author Share Posted November 11, 2011 Apply the gradient to the <html> element instead. The <body> only does stretch out to fit the content. I get the same result. :/ Link to comment Share on other sites More sharing options...
DannyGolden Posted November 11, 2011 Author Share Posted November 11, 2011 Apply the gradient to the <html> element instead. The <body> only does stretch out to fit the content. Unless there is something special you need to do in order to style the HTML element, here is what I did... html {background: -webkit-linear-gradient(top, #5c5b51 0%,#262622 100%); /* Chrome10+,Safari5.1+ */} Link to comment Share on other sites More sharing options...
dsonesuk Posted November 11, 2011 Share Posted November 11, 2011 Don't apply it to the html, just give 100% height to html and body body, html {min-height:100%;} Edit: change it to min-height instead Link to comment Share on other sites More sharing options...
DannyGolden Posted November 11, 2011 Author Share Posted November 11, 2011 Don't apply it to the html, just give 100% height to html and body body, html {min-height:100%;} Thank you! That did the trick. Link to comment Share on other sites More sharing options...
Ingolme Posted November 11, 2011 Share Posted November 11, 2011 Hmm, well I did learn something new. While the HTML element does extend around all the content, the gradient seems to fit only to the height of the content it contains, unlike background color or background image. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 11, 2011 Share Posted November 11, 2011 The general rule is you can use height:, overflow: in html element, body element you set height properties: overflow: background properties, margins, padding, font properties, and then no limit for everything between body tags. Link to comment Share on other sites More sharing options...
pdxGray Posted November 11, 2011 Share Posted November 11, 2011 Thanks all the css literati I was having the same prob. glad I read this post. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.