Wordpress is Beheading Me

January 14, 2019 7:19 AM

I'm trying to set up a new blog. I have a header image I want to use. I am making sure that the size of the header fits Wordpress's specs for my theme. It is still cutting off bits of it anyway. Help.

the blog is here. (Yes, that's me.) The title bar along the bottom is getting cut off just a bit, even though the header is under the size limit imposed by the theme in question.

I've tried switching to another theme, and that one cut off the top of my head.

I've tried shrinking the header image down even smaller, and ironically that just cut off MORE of the title bar.

What am I doing wrong?

posted by EmpressCallipygos to Computers & Internet (14 answers total)

Perhaps the theme you're using or WP itself has a default border of X pixels. If the image is 100px high, it adds a 10px border meaning it only shows 90px. I would look for a setting that asks for border/padding/margin and set it to 0. Barring that, I would add X pixels to the perimeter of the photo and make them transparent and let WP snip those off.
posted by dobbs at 7:43 AM on January 14, 2019

There's no link.
posted by DarlingBri at 8:16 AM on January 14, 2019 [1 favorite]

Response by poster: Whoops: here is the link.

I would look for a setting that asks for border/padding/margin and set it to 0. Barring that, I would add X pixels to the perimeter of the photo and make them transparent and let WP snip those off.

The specs state that the header should be something like "450px tall" (I'm not remembering an exact figure, this is just an example). I set the most recent attempt at something well below that - like 400 if it is 450, or maybe even 370 - and it still cuts off the bottom. (Again, I am not remembering the exact figures, but it's definitely 4-something, and the current pixel height is 3-something.)
posted by EmpressCallipygos at 8:52 AM on January 14, 2019

Best answer: I'm using Chrome, and the image is fully displayed and the menu looks fine from here.

https://imgur.com/a/UNIX7Ak
posted by humboldt32 at 9:11 AM on January 14, 2019

Your image height is actually 452px, btw.
posted by humboldt32 at 9:13 AM on January 14, 2019

Response by poster: I'm using Chrome, and the image is fully displayed and the menu looks fine from here.

https://imgur.com/a/UNIX7Ak

What.

Dude, that is exactly how I want it to look, but when I look at it (also on chrome!) the bottom bit of the title is cut off.

Okay, maybe I have another question - does it look like Humboldt's picture for everyone else but me? If so, I have nothing to worry about after all and thank you for your time.
posted by EmpressCallipygos at 9:28 AM on January 14, 2019

On my installation of latest Firefox the picture is cropped just above your eyebrows, and I only see the top quarter of your logo (it's cropped just above where the text starts).

It looks like this might be due to the interaction between

background-size: cover

and the min-height in your .site-header-image CSS.
posted by Nonsteroidal Anti-Inflammatory Drug at 9:34 AM on January 14, 2019

Yep, looks fine in Firefox to me. And seconding humboldt32 - your image is 452 px tall. If you have a program that's telling you otherwise, it's incorrect.

Try installing another browser for yourself for testing purposes, and be sure to refresh many times. Maybe it's stuck in a cache of sorts, so you're not seeing the current image?
posted by hydra77 at 9:35 AM on January 14, 2019

The problem appears not to be browser but screen size. When I view your blog full-screen (Firefox / OS X), the top and bottom of the image are cut off. When I make my browser less wide, the full image is displayed. Do you have any theme or plugin settings related to responsiveness?
posted by zebra at 9:38 AM on January 14, 2019 [1 favorite]

It looks like this might be due to the interaction between background-size: cover and the min-height in your .site-header-image CSS.

Yep, upon further testing this cropping happens if your browser window is "too" wide. The CSS is making the image wider to fit the browser window, which means the image is now taller, which means your min-height is wrong. Make your browser a little narrower and the cropping goes away.

That's obviously not an actually fix, however. I guess the solution will depend on how much you are able to modify the theme HTML and/or CSS.
posted by Nonsteroidal Anti-Inflammatory Drug at 9:39 AM on January 14, 2019 [1 favorite]

Response by poster: I guess the solution will depend on how much you are able to modify the theme HTML and/or CSS.

And whether I know how to do either. Which....isn't a guarantee.
posted by EmpressCallipygos at 10:00 AM on January 14, 2019

You could try adding something like this to your styles.css

#page {
max-width: 1080px;
margin: 0 auto;
}
posted by humboldt32 at 11:07 AM on January 14, 2019

I suspect (but haven't tested) that the culprit is in the CSS property "background-size: cover", which makes sure the background of the box is completely covered. If it were replaced by something like "background-size: auto 100%" (which would make the image fit to the height of the box, then leave a gap to the left and right), then you could maybe make sure the image is wider than the usual use case, put a fade to black on either side and make the background of the box black. In that way the gap would look like a design choice.

I've been staring into computers for a long time today, and may be hallucinating. Is that answer deranged?
posted by Grangousier at 2:29 PM on January 14, 2019

Here is what I'm seeing: MCC header resize on Imgur
The top image is full-width on my 13" laptop. The second and third images show how the banner responds as the browser window gets narrower. (The resizing / reframing of the image is definitely width-dependent.)

The suggestions above may well work for you. But one approach that will definitely net you a usable result is:
Re-compose your image so that all of the elements that matter — face and title in this case — are in the “safe zone” that never gets cut off.
posted by D.Billy at 6:29 PM on January 14, 2019 [1 favorite]