Jump to content

Css3 Gradient Issue

Recommended Posts

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 post
Share on other sites
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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...