Skip Navigation

[Resolved] footer and header background color overflow to the page body

This support ticket is created 8 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 3 replies, has 2 voices.

Last updated by Minesh 8 years, 2 months ago.

Assisted by: Minesh.

BG issue8.jpg
BG issue7.jpg
BG issue6.jpg
BG issue5.jpg
BG issue4.jpg
BG issue3.jpg
BG issue2.jpg
BG issue1.jpg

I am trying to: create a header and footer background in black

I visited this URL: hidden link

I expected to see: the body of the page with white background like this example hidden link

Instead, I got: the body of this page in black

both pages using the same layout
initially I used a CSS id Selector for both header and footer and seen the issue for the first time
I change the CSS to class Selector but still have the same issue.

when I display the search page with no parent layout
it comes as I want it to be i.e. no black background
when I assign the parent layout I get the issue on the page

I created a test page with the search view shortcode in it and still have the issue
when I change the shortcode to a different search view the issue disappear - see hidden link

BTW i couldn't upload images using edge browser. i had to switch to Firefox to submit this ticket.

Please advise,




Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

I checked your issue and the reason why backgound color is spreading in the middle section is due to some padding/margin is added to div.

could you please try following CSS code for your footerbg CSS class. I've added "clear:both;" to it:

.footerbg {
    background: black none repeat scroll 0 0;
    clear: both;

I hope this solution will help you to resolve your issue.

BG issue10.jpg
BG issue9.jpg

Thanks Minesh,

The CSS code solved part of the issue.

I still have 2 issues with this layout
The footer background is set to be extend to the full width of the page and it does not.
The search and result form are offset to the right and not centered on the page.

Please the enclosed screenshots and advise,




Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Glad to hear that your original issue is resolved.

As the original issue is resolved may I kindly ask you please to open a new ticket for your additional questions. This will help other users with similar problems to find solutions when searching the forum.

Thank you for understanding.

This ticket is now closed. If you're a Toolset client and need related help, please open a new support ticket.