- This topic has 8 replies, 2 voices, and was last updated 3 years, 11 months ago by Leo.
April 18, 2019 at 9:43 am #872797Melissa
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!GP Premium 1.7.8April 18, 2019 at 9:47 am #872802LeoStaffCustomer Support
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:
If this doesn’t help, any chance you can link me to the page in question so I can see the issue?
Let me know 🙂
Adding CSS: http://docs.generatepress.com/article/adding-css/April 18, 2019 at 10:04 am #872810Melissa
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.April 18, 2019 at 10:04 am #872813Melissa
Alas, the site is local right now during development.April 18, 2019 at 10:09 am #872816LeoStaffCustomer Support
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?
If 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.
Adding CSS: http://docs.generatepress.com/article/adding-css/April 18, 2019 at 10:13 am #872818Melissa
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.April 18, 2019 at 12:15 pm #872894LeoStaffCustomer Support
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.
Adding CSS: http://docs.generatepress.com/article/adding-css/April 18, 2019 at 12:34 pm #872912Melissa
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.April 18, 2019 at 12:37 pm #872914LeoStaffCustomer Support
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:
Adding CSS: http://docs.generatepress.com/article/adding-css/
- You must be logged in to reply to this topic.