I want to add a background image to my footer so it is fixed to the bottom, I also want to move the footer menu up so it sits above my footer image

Support
#1

The site I am working on is http://sumsolutions.com.au. As you can see I want my image that I have to be fixed to the bottom and my menu and logo to be above the grey colouring.

Is it possible to do this? I have already added the following CSS:

.x-colophon.bottom {
background: url(http://sumsolutions.com.au/wp-content/uploads/2017/08/Footer-250.jpg) no-repeat;
background-size: 100%;
margin-bottom: 0px;
}

#2

Hello There,

Thanks for writing in! Please have your code updated and use this instead:

.x-colophon.bottom {
    background: url(http://sumsolutions.com.au/wp-content/uploads/2017/08/Footer-250.jpg) no-repeat;
    background-size: 100%;
    background-position: bottom center;
    padding-bottom: 0;
}

Hope this helps. Please let us know how it goes.

#3

Thanks, That places the image at the bottom correctly. Is it possible for me to move my menu and logo up so It sits nicely above the grey area of my Logo. See footer here http://sumsolutions.com.au/. Thanks :slight_smile:

#4

Hello @mickster58,

I am unable to load the website and getting following error message:

503 Service Unavailable

No server is available to handle this request.

Please let us now once the issue is resolved, we’ll be happy to help regarding your query.

#5

Hi Prasant

I have the same question and added the suggested code in the css section of the customizer. But nothing happens unfortunately…

See for instance http://deambachtsschool.org/activiteiten/

This page had a standard template because it’s the archive page of the mec calender plugin. For the other pages I made a customised header and footer (see home). But this is not possible with the mec archive page. Do you have a solution?

Regards, Marjolijn

#6

Hi @MarjolijnZegers,

Thanks for writing around! You can try adding the following code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

.archive #main-content:after {
    content: '';
    background: url(http://deambachtsschool.org/wp-content/uploads/2017/10/mozaiek-1_footer-mz.png) no-repeat;
    background-size: 100%;
    background-position: bottom center;
    padding-bottom: 0;
    height: 75px;
    width: 100%;
    display: block;
}
.archive .x-colophon.top {
    background: #000;
    color: #fff !important;
}
.archive .x-colophon.top .h-widget {
    color: #fff;
}

Hope this helps!

#7

Thanks! It works! Regards, Marjolijn

#8

Sorry Nabeel, but I have another question. The blogpage also needs this footer… so how can I make this css-code ‘general’ so that all ‘generated’ pages get this footer?
Regards, Marjolijn

#9

Hi again,

To make the above code global, replace it with the following code:

#main-content:after {
    content: '';
    background: url(http://deambachtsschool.org/wp-content/uploads/2017/10/mozaiek-1_footer-mz.png) no-repeat;
    background-size: 100%;
    background-position: bottom center;
    padding-bottom: 0;
    height: 75px;
    width: 100%;
    display: block;
}
.x-colophon.top {
    background: #000;
    color: #fff !important;
}
.x-colophon.top .h-widget {
    color: #fff;
}

Let us know how this goes!

#10

Hi @Nabeel,

Unfortunately it doesn’t work for the blogpage… Do you have an alternative? I will send you the credentials for the website so you can have a look.

Regards Marjolijn

#11

Hi again,

You may try adding the following code for the blog page:

.blog .x-colophon.top:before {
    content: '';
    background: url(http://deambachtsschool.org/wp-content/uploads/2017/10/mozaiek-1_footer-mz.png) no-repeat;
    background-size: 100%;
    background-position: bottom center;
    padding-bottom: 0;
    height: 75px;
    width: 100%;
    display: block;
    margin-bottom: 50px;
}
.blog .x-colophon.top {
    background-color: #ffffff;
}
.blog .x-colophon.bottom {
    display: none;
}

Hope this helps!

#12

Hi @Nabeel

I am sorry but this works half, the backgroundimage is visible on the blogpage now, but not on top.

Another thing I noticed: the ‘global’ code you provided works only for the activities page. For instance, I made a page deambachtsschool.org/agenda also with a standard template and on this page the background image in the footer also is not visible. Maybe this helps in finding a solution?
Thanks a lot for your help.
Marjolijn

#13

Hi Marjolijn,

As you see this requires custom coding and due to your setup, global code would not fit for your site, this may need repeated alternation for each page or post type which falls outside the scope of our support. If you need in depth changes You may wish to consult a developer to assist you with this. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.