Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi,
I am looking for your assistance to centre the background image I have in my footer please? It is currently left aligned and tiled which I do not want.
Also I would like to increase the height of the footer, as when I insert image of greater height they end up not displaying correctly.
the url is: seoul2singapore.org
thanks,
Collie
Hi Colin
Thanks for running Vantage.
Insert the following under Appearance >Custom CSS to resolve:
#colophon { background-repeat: no-repeat; background-position: center; }Thanks
Fantastic, so that’s the first bit resolved.
Can you look at the footer on seoul2singapore.org and help me change the width of the footer background image so that is will match 100% width of the blog roll?
For sure.
Not that I know of. Usually I’d suggest adding:
background-size: cover;
But that doesn’t help in this situation. If that’s a vector drawing it could be saved at a larger size. Can you get that image saved at 1080px?
ok so I have added ‘background-size: cover;’ to the customer css, but nothing changed.
I also changed the image size to 1080px wide.
but now I am missing the lower section of the image?
I figured it out!
I used percentage instead of cover
– while I am at it can you help me with the header image too, so that it can achieve percentage like the footer?
Here is a selector you can work on for the header:
/* Masthead Background Image Cover */ header#masthead { background-repeat: no-repeat; background-position: center center !important; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }thanks, does that go into the customer css?
I meant custom css!
That’s correct, insert under Appearance > Custom CSS.
no difference! : ( any ideas?
The background is inserted as an image there, not a background so we’ll need to say:
header#masthead hgroup .logo img { width: 100%; }Remove the last selector as it’s not needed. Thanks.