Background image too big

Hi there,

Any reason you are using a merged header element?

I don't believe you need that.

Let me know :)

OK, I played around with the padding and found a setting that works. Thank you.

Just one more question: is it possible to have the background overlay color only behind the text?

Hi there,

That's not possible with the settings, but we could use CSS to do that if you'd like?

.inside-page-hero h1 {
    display: inline-block;
    background: rgba(0,0,0,0.5);
    padding: 10px;
}

Perfect, thank you.

You're welcome :)

Hello,
my excuses, but I'm still struggling with the background image.

As I have two layouts with different width for the featured image 672 and 1140), I used before the same height 345. But this created a problem in WPSP because there is a different image ratio (672:345 is more or less 2:1, 1140:345 is around 10:3) and it showed the different ratio in the cards. I decided then to use the same ratio for the wider images and they are now 1140x585.

The problem is now, that I don't want to show the full height because it fills up more or less the screen and the reader does not see the beginning of the text. But with parallax it is only possible to define background image position on top.
Here is my example. With the parallax I see only heaven and palms and not St. Peter's Dome. For my layout is it necessary to see initally the bottom of the background image. By the way, I have configured now without parallax to center bottom, but it does not really show the bottom. If you change the browser width, you can see that it shows more or less part of the lower part of the image.

How can I configure this? Thank you.

Hi there,

I'm not sure I'm seeing it on that page - there doesn't seem to be any parallax?

The parallax option does require the image to start at the top, unfortunately - there isn't a workaround for that at the moment.

You could try setting the image to background-attachment: fixed with some CSS, which is kind of parallax-y, but I'm not sure if that will work, either.

Let me know :)

ACtually I did not implement the parallax on this page because I have St. Peter's Dome in the bottom and with the actual parallax settings it is cut. I made some pages with parallax, where the bottom of the image is not critical.

On the internet I see pages where the image is not fixed but scrolls from bottom to top slower than the overlay. This is not possible with GP?

Can you please explain better how to implement the
background-attachment: fixed
Thank you

For example, if you disable parallax, you can do this:

.page-hero {
    background-attachment: fixed;
    background-position: center center;
}

OK, this looks good so far. But the background image is expanded again. How can I handle this? Please see the issue on the test page.

Hi there,

edit the CSS Tom provided to include the size property like so:

.page-hero {
    background-attachment: fixed;
    background-position: center center;
    background-size: contain;
}

Hi David,
there is no change.

oops sorry the background-size property doesn't apply with fixed attachements. The image is sized relative to the browser viewport. I am not sure there is a CSS solution for this.

It seems the background-size property does not react. I tried px and % but the result is all time the same.