- This topic has 8 replies, 2 voices, and was last updated 5 years ago by
.
-
Posts
-
I’m having trouble understanding what is going on with my header hero images. The vertical size seems to be entirely dependent on how I set the top margin in the element (invisible at 0% stretching to huge as the percentage goes up). In addition, no matter the size, the images getting cropped. I just want it to use the dimensions of the given photo.
Please help!
Customer Support
Hi there,
That’s actually just how the background images work – how much it shows depends on the size of the content.
In this case, the height is controlled by the top and bottom padding as explained here:
https://docs.generatepress.com/article/header-element-overview/#paddingIf this doesn’t help, any chance you can link me to the page in question so I can see the issue?
Let me know 🙂
So I can’t get it to just use the photo dimensions?
And why is it cropping? It does that no matter what padding I set.
Alas, the site is local right now during development.
You’d have to tweak the top and bottom padding.
It doesn’t crop the image by default (unless the original image is wider than the container width).
Background images aren’t responsive by nature (it’s not a theme thing).
Perhaps try changing the background image position?
https://docs.generatepress.com/article/header-element-overview/#background-image-positionIf this doesn’t help, any chance you can duplicate the issue on a live server? It’s really hard for me to tell without looking at it.
Well, it is wider than the content width. I think I need that to work on larger screens, right? Even if my page content remains narrower.
Are you using full width? If so then yeah how much the background image show will depend on the screen size.
You can test by resizing the browser.
Ok, thanks for your help. I will fiddle with things and if I can’t get it working, I’ll see if I can get it up on a live server later.
No problem!
It would definitely be easier for me to provide some tips if I can see the issue 🙂
Here are some examples as well if you haven’t found them yet:
https://docs.generatepress.com/article/page-hero-examples/
- You must be logged in to reply to this topic.