Background Header, Footer image ignoring the "bottom" parameter

[shimoda]

I am using the code below to display a background image in the header and footer. I want to display the background from the bottom of the image(so the look is the same as it on the rest of the page when this background is used in few sections), but the “bottom” parameter seems to be ignored.

Could you tell me what is wrong? Thanks.

header .x-navbar,
footer.x-colophon.top {
background: url(http://agencebcommunication.com/wp/wp-content/uploads/black-wood-bck_seul.jpg)
no-repeat,bottom,center;
}

[basanta]

Hi There,

Thanks for writing in!
The corrected CSS should be like this.

header .x-navbar,
footer.x-colophon.top {
background: url(http://agencebcommunication.com/wp/wp-content/uploads/black-wood-bck_seul.jpg) no-repeat bottom center;
}

Hope this helps!

[shimoda]

Thanks for the fix! How can I apply this image to logo header background?

[shimoda]

I am trying to apply the background to the whole header and footer using the code below. But it does not seem to work. Any help would be appreciated.

header.x-masthead {
background-image: url(http://agencebcommunication.com/wp/wp-content/uploads/black-wood-bck_seul.jpg)
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

footer.x-colophon {
background: url(http://agencebcommunication.com/wp/wp-content/uploads/black-wood-bck_seul.jpg) no-repeat bottom center;
}

[nabeel]

Hi again,

Please try this code instead:

header.masthead {
    background: url(http://agencebcommunication.com/wp/wp-content/uploads/black-wood-bck_seul.jpg) no-repeat center !important;
    background-size: cover;
}
.x-logobar, .x-navbar, .x-navbar .sub-menu, .x-colophon.top, .x-logobar-inner {
    background-color: transparent !important;
}
footer.x-colophon {
    background: url(http://agencebcommunication.com/wp/wp-content/uploads/black-wood-bck_seul.jpg) no-repeat bottom center;
}

Let us know how this goes!

[shimoda]

Thank you Nabeel! It works well.

[nabeel]

Glad it works

Cheers!