Support » Themes and Templates » Twenty Eleven Background Gradient

  • Resolved Scott

    (@olsonsp4c)


    I would like to create a background gradient that goes from a solid color to white in Twenty Eleven using CSS. I got it to work all the way down the page until below the footer, then there was the original solid color again at the bottom of the page. Anyone know a workaround?

    Scott

Viewing 6 replies - 1 through 6 (of 6 total)
  • Can you post a link to your site where this is?

    Thread Starter Scott

    (@olsonsp4c)

    Thread Starter Scott

    (@olsonsp4c)

    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 );
    }

    Thread Starter Scott

    (@olsonsp4c)

    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

    Thread Starter Scott

    (@olsonsp4c)

    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 );
    }

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Twenty Eleven Background Gradient’ is closed to new replies.