Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Cathi Swanson
2,060 Pointssimple gradient in background of page - solved!
Sometimes what seems to be the simplest thing just hangs you up! I'm wanting to add a 2-color gradient (top to bottom) to the background of a page. I've been googling the heck out of this, and getting some complex-looking code (but maybe that's the only way?)
Ideally, I'd achieve this via in-line styling within the html doc, and not with an associated .css file. (is that possible?)
any pointers would be appreciated!
12 Answers
Guil Hernandez
Treehouse TeacherHi Cathi,
To create a full-page gradient, try something like the following:
body {
background: linear-gradient(orange, darkblue);
}
You'll then need to set the height of the html element to:
html {
height: 100%;
}
Neal Gist
8,438 PointsHi Cathi,
To put the CSS inline just use the style attribute:
<body style="background:linear-gradient(red,green);" >
Also, check out Colorzilla's gradient generator for a bunch of cross-browser compatible CSS: (http://www.colorzilla.com/gradient-editor/)
James Barnett
39,199 PointsIdeally, I'd achieve this via in-line styling within the html doc, and not with an associated .css file. (is that possible?)
Those are called interal stylesheets as opposed to external stylesheets which are in their own CSS files. In general external style sheets are more maintainable, as you can always just link another style sheet.
Cathi Swanson
2,060 PointsThanks! I did see the Colorzilla generator already - I wasn't sure if I could put that much inline...
I tried both of your recommendations, adding it within the <head> tags, but it still comes up blank. Hmmm....
James Barnett
39,199 PointsInline styles are generally a bad idea, as the only way to override them is to use !important thus breaking the cascading part of cascading style sheets.
Cathi Swanson
2,060 PointsJames - aren't internal stylesheets preferred for email?
Neal Gist
8,438 PointsCathi, not very many email clients support external stylesheets unfortunately. CSS inside of emails is still pretty rough with such varying support. You may be better off using CSS2 techniques like background-image gradients/tiling, etc. instead of CSS3.
Also, if you have a URL you can provide, we may be better able to assist you!
Cathi Swanson
2,060 PointsThanks - I will check out more either tonight or tomorrow morn (must escape the office while i can!) :)
Cathi Swanson
2,060 Pointsjust wanted to let you all know that I have found success! Thanks for helping out a newbie :)
James Barnett
39,199 PointsCathi - Do tell, how'd you end up solving your issue?
Cathi Swanson
2,060 PointsI used ColorZilla to create the gradient, and CodePen to play around... I was still having some issues though when I popped the code into Dreamweaver - I think I just wasn't putting it in the right place and was missing a bracket somewhere.
The requirements provided to me for this page was that no external images or style sheets could be used, so I was severely limited with what I was allowed to do. (thus the need for internal styling if I wanted anything at all!)
More details, for the next person that is looking to do this:
(& if anyone more knowledgeable than me sees something drastically wrong with this, I welcome the feedback!)
<head> <style type="text/css">
html { height: 100%; }
body { background: #63a1d7; /* Old browsers / / IE9 SVG, needs conditional override of 'filter' to 'none' / background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzYTFkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU2JSIgc3RvcC1jb2xvcj0iIzAzNWE4OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDFiMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #63a1d7 0%, #035a89 56%, #001b2d 100%); / FF3.6+ / background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#63a1d7), color-stop(56%,#035a89), color-stop(100%,#001b2d)); / Chrome,Safari4+ / background: -webkit-linear-gradient(top, #63a1d7 0%,#035a89 56%,#001b2d 100%); / Chrome10+,Safari5.1+ / background: -o-linear-gradient(top, #63a1d7 0%,#035a89 56%,#001b2d 100%); / Opera 11.10+ / background: -ms-linear-gradient(top, #63a1d7 0%,#035a89 56%,#001b2d 100%); / IE10+ / background: linear-gradient(to bottom, #63a1d7 0%,#035a89 56%,#001b2d 100%); / W3C / filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63a1d7', endColorstr='#001b2d',GradientType=0 ); / IE6-8 */
}
body { background-color: #004d78; }
</style> </head>