Header image too large


#1

http://embarrassfunction.com/

The header image size is 533x300 and as you can see (if you’re looking in Firefox) the image stretches out too wide in full view.

I haven’t had this issue with other images of similar sizes and when I tried resizing this image to the recommended dimensions, it’s still blowing it out too big.

I saw on a different thread for the same problem that some custom css fixed the issue, but that custom css was not included in the reply.

Please help!


#2

You can add this to a custom CSS plugin if you want to contain the header background image:


.has-banner:after {
    background-size: contain;
}

But you should also upload a bigger image.


#3

Like I said, even when I resized the image to the recommended dimensions of 1920x650 it was still blowing out.

That said, this code kind of fixed the issue in that the entire image scales horizontally correct, but now I get a strip of the background showing under the header image. Is this really all the image’s fault or is there something else I’m missing?


#4

I’m not seeing the strip. Perhaps you’re on a 4:3 monitor?

What you’re missing is this: the whole header area stretches to full screen on big screens. The header image is actually a background image and it also stretches to full screen (with the original code). Because the image ratio you’re using won’t be the seem ratio as your device, therefore parts of the image won’t be shown. That’s simply how it goes.

My suggestion: use something like 1366x768px - with a ratio close to this anyway - and leave the code as it was originally.


#5

Thanks Vlad. You’re a big help.