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
Milan Milosevic
6,647 Pointssimetric linear gradient
I'm trying to put a background gradient to my page, i want it to be some sort of brown at both sides, and to gradient to white in the middle of page.
This thing is sort of doing it :
body { background: -webkit-linear-gradient (left, #9e8a7e, #fff 15%, #fff 85%, #9e8a7e);
background: -moz-linear-gradient (left, #9e8a7e, #fff 15%, #fff 85%, #9e8a7e);
background: -o-linear-gradient (left, #9e8a7e, #fff 15%, #fff 85%, #9e8a7e);
background: linear-gradient (to right, #9e8a7e, #fff 15%, #fff 85%, #9e8a7e);
background-size: cover;
}
but the background is not smooth, it's jagged :/
is there some nicer way? Thanks in advance
1 Answer
Shawn Denham
Python Development Techdegree Student 17,802 Pointscreated this on the Ultimate CSS Gradient Generator and it looked pretty smooth to me...not sure what pattern you were going for though, this one is linear
background: #9e8a7e; /* Old browsers */
background: -moz-linear-gradient(top, #9e8a7e 0%, #ffffff 51%, #9e8a7e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9e8a7e), color-stop(51%,#ffffff), color-stop(100%,#9e8a7e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9e8a7e 0%,#ffffff 51%,#9e8a7e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9e8a7e 0%,#ffffff 51%,#9e8a7e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9e8a7e 0%,#ffffff 51%,#9e8a7e 100%); /* IE10+ */
background: linear-gradient(to bottom, #9e8a7e 0%,#ffffff 51%,#9e8a7e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e8a7e', endColorstr='#9e8a7e',GradientType=0 ); /* IE6-9 */
Milan Milosevic
6,647 PointsMilan Milosevic
6,647 PointsHi Shawn,
thanks. That's similar to what i've tried, but i stil see some vertical lines, especially in chrome :D
And i was looking for having that pure white in a wider area, lets say everything from 15% - 85 % should be pure white.
Thanks!
Shawn Denham
Python Development Techdegree Student 17,802 PointsShawn Denham
Python Development Techdegree Student 17,802 PointsIs this closer? I added some more stop points and changed the opacity, it seems to have smoothed our the harshness a bit.
here is the link to it so you can play with it if you want, I will also put the CSS in this post