Home › Forums › Graphene WordPress theme › Support

Add a gradient background

  • Anonymous

    August 30, 2012 at 4:39 pm #5585

    Hello,

    I try to put a gradient background on my website.

    I wrote:

    background-image: linear-gradient(bottom, rgb(255,255,255) 16%, rgb(218,218,212) 51%, rgb(217,217,213) 47%);
    
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 16%, rgb(218,218,212) 51%, rgb(217,217,213) 47%);
    
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 16%, rgb(218,218,212) 51%, rgb(217,217,213) 47%);
    
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 16%, rgb(218,218,212) 51%, rgb(217,217,213) 47%);
    
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 16%, rgb(218,218,212) 51%, rgb(217,217,213) 47%);
    

    
background-image: -webkit-gradient(
    
linear,
    
left bottom,
    
left top,
    
color-stop(0.16, rgb(255,255,255)),
    
color-stop(0.51, rgb(218,218,212)),
    
color-stop(0.47, rgb(217,217,213))
    
);

    Now the question is how to use it? I tried to assign it to # container but it does not work.

    Can you help me?

    thank you

    Anonymous

    August 30, 2012 at 4:43 pm #32267
    Quote:
    I tried to assign it to # container but it does not work.

    You would probably assign it to #content rather than #container

    #content {
    
background-image: linear-gradient(bottom, rgb(255,255,255) 16%, rgb(218,218,212) 51%, rgb(217,217,213) 47%) !important;
    
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 16%, rgb(218,218,212) 51%, rgb(217,217,213) 47%) !important;
    
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 16%, rgb(218,218,212) 51%, rgb(217,217,213) 47%) !important;
    
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 16%, rgb(218,218,212) 51%, rgb(217,217,213) 47%) !important;
    
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 16%, rgb(218,218,212) 51%, rgb(217,217,213) 47%) !important;
    

    
background-image: -webkit-gradient(
    
linear,
    
left bottom,
    
left top,
    
color-stop(0.16, rgb(255,255,255)),
    
color-stop(0.51, rgb(218,218,212)),
    
color-stop(0.47, rgb(217,217,213))
    
) !important;
    
}

    Anonymous

    August 30, 2012 at 5:23 pm #32268

    Hi,

    Thank you for your answer.

    It works, but not really where I want to … If you look at the site, the gradient is on the side of the content area where there is no text etc … And not in the background …

    What mistake have I done?

    Thanks again

    Anonymous

    August 30, 2012 at 5:45 pm #32269

    I can’t see you site now. I’m on mobile.

    Try replacing #content with body

    Or, there might be other class.. Play with firebug..

    Anonymous

    August 30, 2012 at 6:11 pm #32270

    It works with “body” but but the gradient does not apply, there is only one color.

    I’d love to do it in CSS rather than put an image.

    if someone has an idea…

    Thanks a lot.

Viewing 5 posts - 1 through 5 (of 5 total)

  • You must be logged in to reply to this topic.