[Resolved] Image in page header not showing all of it?

[Tully]

I am using a page header with image, however it doesn’t show the whole image, it seems to crop the image vertically so it is missing part. I have tried different images, I have tried altering the image height and width properties and leaving them black, I have tried enabling and disabling hard crop, but nothing seems to make the slightest difference to the size of the image – it is always exactly the same. Also if I switch “full screen” off in the content section, the background image doesn’t appear at all. What am doing wrong? ALso, is there any documentation that describes exactly what all the options actually do? Thanks

[Tully]

Sorry, forgot to include url. http://www.bendigodogtraining.com.au/wordpress

[Tully]

In the actual image file, the picture goes all the way to the dogs feet.

[Tully]

I removed revolution slider, and the page header background image expanded a fair bit, but still not quite full size, and still can’t seem to have any affect on its size with all the options as mentioned above?

[Tom]

Hi there,

This is just the way CSS background images work – they will fill the area they’re applied to depending on their aspect ratio. If the aspect ratio was perfect, the entire image would show, but even then it would be different as you changed the aspect ratio (reduced the screen size for example).

You can force it to show the full height of the image using CSS, but this will cause an issue where it will repeat if the image isn’t wide enough:

.generate-content-header {
    background-size:contain;
}

[Tully]

Okay, thanks Tom. But what do all the options do for image width and height, hard crop etc. if you can’t alter the image size?

[Tom]

Those options apply if you’re only showing the static image – they won’t apply to the image if it’s set as a background.

[Tully]

Thanks.

[Tom]

No problem 🙂

[Hamish]

Hi Tom,

I was struggling to get a nice result with the header image until I added css to center the background image. It would be nice to have background image position feature in the header settings (I don’t see it there :?_

What about having the correct WP responsive image load for the screen and have the option of none at all. It seems that on mobile the benefit of no image is speed and a cleaner look in most cases.

What are your thoughts on this? (apart from show me the ongoing development cash)

[Author]

Posts