Header image on mobile

[xrbbaker]

Hello – I just launched our production site using your theme!  http://www.assuredresume.com.  I really like it!  Question:  It seems the header image simply crops the center of the image as one goes from desktop to mobile.  My main character is on the right hand side of the image.  When viewing on the phone, the header is the center empty space of the image.  Is there a way for the whole header image to scale down to fit the phone vs it seeming to just crop the center of the desktop image?  …or some other solution?  Thank you

[Andy]

The header background image is centered by default, and as it is a background image it has to fill the header/page title area.

You can change the focal point of the background by adding this CSS snippet at Customize > Additional CSS:

.entry-header.with-image,
.archive-header.with-image {
    background-position: 85% center;
}

This will move the focal point from the center to approximately where the main character is on your image. You won’t notice any difference on wide screens, but as the screen narrows on mobile, the main character should be centered.

[Author]

Posts