This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Footer position and height

Open 11 replies premiumthemetheme-vantage
Colin O'Rourke
11 years ago · Last reply by Andrew Misplon 11 years ago

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

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

11
  1. Andrew Misplon Staff 11 years, 6 months ago

    Hi Colin

    Thanks for running Vantage.

    Insert the following under Appearance >Custom CSS to resolve:

    #colophon {
background-repeat: no-repeat;
background-position: center;
}

    Thanks

  2. Colin O'Rourke 11 years, 6 months ago

    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?

  3. Andrew Misplon Staff 11 years, 6 months ago

    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?

  4. Colin O'Rourke 11 years, 6 months ago

    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?

  5. Colin O'Rourke 11 years, 6 months ago

    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?

  6. Andrew Misplon Staff 11 years, 6 months ago

    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;
}
  7. Colin O'Rourke 11 years, 6 months ago

    thanks, does that go into the customer css?

  8. Colin O'Rourke 11 years, 6 months ago

    I meant custom css!

  9. Andrew Misplon Staff 11 years, 6 months ago

    That’s correct, insert under Appearance > Custom CSS.

  10. Colin O'Rourke 11 years, 6 months ago

    no difference! : ( any ideas?

  11. Andrew Misplon Staff 11 years, 6 months ago

    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.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread