Header background image

jgoodhoofd · October 2014

I'd like to make the blank white area that has the logo file into a an image instead of the #ffffff background that it is. How do I go about doing that? I'll probably end up making the image a .png so that I can then see the background image for the whole site.

Also, what css id or class do I edit to make this header area deeper or have more height/depth?

Albert · October 2014

Hi,

please make a screenshot with necessary changes and explanation because we are not sure what exactly you want to do.

jgoodhoofd · October 2014

Albert · October 2014

This can be done with below css only but it won`t look good and unfortunately we don`t have anything else because it is not possible to do it exactly as you showed on screenshot above.

#Top_bar .logo { border: 1px solid #000 !important; }

Thanks for understanding!

jgoodhoofd · October 2014

Where in the theme's css files does it make the background white for this area?

The default background for a div tag should be transparent so somewhere in your theme files you call this area to be #fff. Thoughts on the css files where this might be?

Albert · October 2014

We do not recommend to change theme`s files because you won`t be able to do theme updates in the future. All css should be overwritten in Theme options > Layout > Custom CSS & JS > Custom CSS section because whole data from this section is stored in database and after update you won`t lose it.

jgoodhoofd · October 2014

I'm going to take my time anyways and remove the theme's files. When I upgrade, I'll just document and make sure I know what to change again for every revision.

How do I remove the space between the very top and the top_bar/logo area? Where is that outlined in the php or css?

Albert · October 2014

To remove padding from top, please use below css:

body { padding-top: 0 !important; }

jgoodhoofd · October 2014

Thanks for your help.

One final question regarding this header and it's image. I am currently using the stack centre header style with a header image as the header background. As the browser width reduces for tablets and smaller screen sizes, the header image is cut on the right side. Is there a css way to make my header image centred so that as the browser width decreases, the header image is cut off on both sides evenly, and not on the right hand side?

Here's an image to further describe what I mean:

http://oakvillecounselling.com/01oc/wp-content/uploads/2014/10/headercut.jpg

Albert · October 2014

It is technically not possible because this is css background image that is not responsive. Responsive can be only img htm ltags. So in this case it is not possible at all.

Header background image

Comments