Background image covers header

[mark hefflinger]

Hi Bill,

My background images added using the Background Manager plugin (http://wordpress.org/extend/plugins/background-manager) are appearing on top of part of the header on pages where the plugin is active.

The logo and nav menu items appear and function properly, but the lavender bar/background color on which they rest in the header disappears on pages where I have added a background image.

Header displays correctly:
http://frenchbulldogomaha.com

Image covers lavender background part of header:
http://frenchbulldogomaha.com/menus-charcuterie
http://frenchbulldogomaha.com/menus-lunch-dinner

I have tried messing with z-index on these elements to no avail.

Note: I would also be open to scrapping that plugin entirely, and coding unique, full-screen background images for individual pages — but I am not sure how to accomplish this code-wise within the Moonrise theme.

Thanks in advance for your advice!

[Bill Robbins]

Mark,

Thank you for your business first of all. I’d be glad to take a look for you. When I click on those links though, I see an image that links to a Facebook page though. If it’s possible for me to see the theme and plugin, let me know.

Thanks,
Bill

[mark hefflinger]

Oops, sorry, I’m using a plugin called “Under Construction” to redirect traffic to a temporary homepage while I’m building the site. I have disabled the plugin temporarily so you can take a look.

I can also whitelist your IP address — giving you full access to the site while maintaining the temp page for other visitors — if you wouldn’t mind providing it to me? I’m really not sure of any security issue with this, so please let me know if this is not a best practice.

[Bill Robbins]

Mark,

Thanks for setting that up. Good looking site too by the way.

On the home page, the header is picking up the body’s background color. On the inside pages with the full screen background images, they are visible instead of the color.

The way around that is to set a color for the actual header. The header doesn’t actually span the full width, so one way around that would be to also set it’s width to 90% with 5% padding on each side. You could do that by adding this to the Custom CSS box:

#header {
	background-color: #d1c0c7;
	width: 90%;
	padding-left: 5%;
	padding-right: 5%;
}

If you run into any questions or trouble, let me know.

Thanks,
Bill

[mark hefflinger]

Voila!

Thanks for the compliment and also for the smart workaround for the header, it worked like a charm.

Thanks Bill!

[Bill Robbins]

Glad to hear that worked for you. If you need anything else, just let me know.

[Author]

Posts