[Resolved] Background image too big

[Bernhard]

Hello,
my problem is the background image in the page hero is displayed expanded.
My container width is 1140px and the image is 1140×345.

Actual settings are container and inner container contained, no padding, offset site header height 345px.
The more padding I add, the more the image is blown up and exceeds the container width. What shall I do to avoid, that the image is displayed bigger than the original?

[Leo]

Hi there,

Any reason you are using a merged header element?

I don’t believe you need that.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Bernhard]

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?

[Tom]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Bernhard]

Perfect, thank you.

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Bernhard]

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 1140×585.

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.

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Bernhard]

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

[Tom]

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

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Bernhard]

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.

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Bernhard]

Hi David,
there is no change.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Bernhard]

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

[Author]

Posts