Docs

[chenke]

Hi,

i’ve a boxed layout and i’m looking for a solutiuon of inserting a graphic between footer and page content.

Any tip or solution?

Best regards

Christoph

[Lely]

Hi Christoph,

That can be achieve using custom CSS. To help you better, please share your site URL and the URL of the image you want to use.

[chenke]

Hi,

website url: http://www.mescheder-buergertreff.de/

graphic url: http://www.mescheder-buergertreff.de/wp-content/uploads/meschede-silhouette-mbtorange-1200×160.png

Thanks for your support.

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

footer.x-colophon.bottom:before {
    height: 160px;
    top: -160px;
    position: absolute;
    content: "";
    width: 100%;
    display: block;
    left: 0;
    right: 0;
    background: url(http://www.mescheder-buergertreff.de/wp-content/uploads/meschede-silhouette-mbtorange-1200x160.png) bottom center no-repeat;
    background-color: white;
    background-size: contain;
}

footer.x-colophon.bottom {
   position:relative;
}

Hope that helps.

[chenke]

Hi Paul,

it works fine 🙂

Thanks for your very quick response and solution!

Regards

Christoph

[Paul R]

You’re welcome! 🙂

[chenke]

Hi,

Sorry, the new graphic overlaps the content e.g. the last widget. You can see it if you delete background-color: in the supplied code:

[Christian]

Upon checking, it does not overlap (see attachment).

Thanks.

[chenke]

You’ll see it better in this attachment…

[Nabeel A]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

footer.x-colophon.bottom {
    margin-top: 160px !important;
}

Let us know how this goes!

[chenke]

Now it works perfect! Thanks!

[Friech]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts