multiple backgrounds on one page

  • PG28

    #9918

    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

    Mod

    Kenneth John Odle

    #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.

    PG28

    #44889

    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

    Mod

    Kenneth John Odle

    #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.

    PG28

    #44891

    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.