[PG28]

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

[Kenneth John Odle]

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]

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

[Kenneth John Odle]

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]

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