Baskerville 2 Header
-
I have made my header in photoshop and can ensure the image matches the 1440 x 221 dimensions recommended, yet my image is still being cropped. I get the same result when I crop and skip cropping. Please help?
The blog I need help with is: (visible only to logged in users)
-
The blog I need help with is onlybigboss.wordpress.com.
Hi there,
That site is currently using the rebalance theme.
Are you using Baskerville 2 on a different site?
-
Hi, I have temporarily changed it as the issue didn’t persist with rebalance. Though Baskerville 2 is the theme I’d ideally like to have.
-
the image matches the 1440 x 221 dimensions recommended
At the very bottom of the documentation it says that:
“Custom Header dimensions are fluid, displayed at varying widths and heights, depending on the screen size. “
If a 1440px image is used, and a users screen is wider than 1440px, then the image may appear to be cut off because background-size:cover; is used in the css to make the it fill the available space while maintaining the image aspect ratio.
It’s a bit difficult to explain, but this guide might help:
If you scroll down to the “keywords” section at that url, you can see a screenshot of how background-size: cover; works, and why the image may appear to be cropped.
The alternative would be to change the css to use background-size: contain. That would show the whole image, but would create gaps around the image depending on a users screen size (as can be seen in the image in the the CSS Tricks article)
If you need more of the background image to be shown, I’d recommend using a larger image, but keep in mind that some of it is always likely to be cut off on some screens.
-
Oh thank you, you’ve been incredibly helpful. I think I’ll be sticking with rebalance it’s grown on me and the header seems suitable on my phone iPad and laptop which was important to me as I’d put some time into making it.
Thank you.
- The topic ‘Baskerville 2 Header’ is closed to new replies.
WordPress.com Forums 