Twenty Eleven Background Gradient

Can you post a link to your site where this is?

https://www.vmhcreations.com

Hey olsonsp4c,

You might want to take a look here : https://stackoverflow.com/questions/2869212/css3-gradient-background-set-on-body-doesnt-stretch-but-instead-repeats

Thank you Aditya, that was the piece I was missing. Just for other’s sake, here is the complete code to add to your child theme’s style.css for a gradient background in the Twenty Eleven Theme (change the color black #000000 to whatever color you want to be at the top and change the color white #ffffff to whatever color you want the be at the bottom).

/* =Gradient Background
———————————————————*/
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: #000000;
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#000000′, endColorstr=’#ffffff’,GradientType=0 );
}

OK, now I have another issue. When the page is too long, a solid color appears at the bottom of the screen after the gradient. Any ideas. On the website, hover over “About” and click “Contact” and you will see what I mean. That page was made using the WordPress JetPack plugin. Thanks for any input you may have!

Scott

OK, I figured out how to fix this issue:

html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: #a81043;
background: -moz-linear-gradient(top, #a81043 0%, #ffffff 100%) fixed;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a81043), color-stop(100%,#ffffff)) fixed;
background: -webkit-linear-gradient(top, #a81043 0%,#ffffff 100%) fixed;
background: -o-linear-gradient(top, #a81043 0%,#ffffff 100%) fixed;
background: -ms-linear-gradient(top, #a81043 0%,#ffffff 100%) fixed;
background: linear-gradient(to bottom, #a81043 0%,#ffffff 100%) fixed;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#a81043′, endColorstr=’#ffffff’,GradientType=0 );
}