Return to Support

multiple backgrounds on one page

Home Forums Graphene WordPress theme Support multiple backgrounds on one page

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #9918
    PG28
    Member

    Hi,

    I am creating this site http://s107647545.websitehome.co.uk/ and want o have the yellow top background also on the bottom. As each page will have different amount of text I can’t use one background picture with yellow on top and bottom. I thought I use this code in the Custom CSS style section:

    #background {
    background-size:cover;
    background: url(http://s107647545.websitehome.co.uk/wp-content/uploads/2015/05/background-haus-fuer-meditation-und-yoga.png);
    background-repeat: no-repeat;
    background-position: center top, center bottom;
    }

    However, it doesn’t work. And it doesn’t make sense to put in footer as the yellow would not go over the whole width of the page.

    Could you please help?

    Thanks

    Petra

    #44888

    You can use a CSS3 gradient for the background, instead of an image. This website will help you generate the appropriate code:

    http://www.colorzilla.com/gradient-editor/

    A gradient will stretch to cover whatever block-level element it is applied to as a background.

    #44889
    PG28
    Member

    Hi Kenneth,

    thanks for your reply. I generated a gradient on this website, as it did not work I included the important! in case it matters however it doesn’t work. Any idea what went wrong?

    I am also not sure if this is what I am looking for. Basically I like to have a background colour on the top and on bottom, both as gradient, something like on this page: https://www.wallner-shop.eu/

    Thanks so much

    Petra

    #44890
    Quote:
    as it did not work I included the important! in case it matters however it doesn’t work. Any idea what went wrong?

    Please post the code you used here, so we can take a look.

    #44891
    PG28
    Member

    Hi Kenneth,

    sorry for the late reply, had a kidney issue…

    Anyhow, I solved the problem with this code:

    body {
    background: url(http://s107647545.websitehome.co.uk/wp-content/uploads/2015/05/background-haus-fuer-meditation-und-yoga.png), url(http://s107647545.websitehome.co.uk/wp-content/uploads/2015/05/background-unten.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top, center bottom;
    background-size: auto auto;
    -moz-background-size: auto auto;
    -webkit-background-size: auto auto;
    -o-background-size: auto auto;
    }

    Love your theme! Love your support forum!

    Thanks so much

    Petra

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

You must be logged in to reply to this topic.