Change page/post header to an image

Hi,

So long as your posts have Featured Images attached to them and post-thumbnails are configured in Appearance > Customize > Blog > Post thumbnails, the Bauhaus theme will display an image in the header title area.

If you want to remove the page title without affecting anything else in the page header area, try:

h2.post-title.heading-font {
visibility: hidden;
}

Let us know if you have any further questions.

Regards,

Emilio Rivera
WPtouch Support

Thank you. The only problem with this is that it doesn’t fit the image correctly. Do I need to use a specific image size? No matter what image I use, it either stretches it out or makes it really small.

Bump.

I would like to know this too.

My header image displays, but it’s tiny. Is there a size that I can use that will display more or less the full screen width?

Hi @williamcampbell,

Any image will automatically scale down to fit the header area. However, an image that is larger in width than in height will work better, and should cover more of the header area. Also, a transparent .png image will help it ‘blend’ better.

You can set your image as the background-image of the header area with the CSS below. You can add the CSS to Appearance > Customize > Custom CSS when editing the mobile theme.

#header-title-logo {
background-image:url('/path-to-the-logo-image') !important;
background-position:center center;
height:60px;
background-size:100% 100%;
}

Just make sure to add the actual path to your image. Then, remove the image added via the settings.

Regards,

Emilio Rivera
WPtouch Support