[Resolved] Background image too big

Home Forums Support Background image too big

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1152164
    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?

    #1152325
    Leo
    Staff
    Customer Support

    Hi there,

    Any reason you are using a merged header element?

    I don’t believe you need that.

    Let me know 🙂

    #1152365
    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?

    #1152423
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1152551
    Bernhard

    Perfect, thank you.

    #1153131
    Tom
    Lead Developer
    Lead Developer
    #1156840
    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.

    #1157201
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1158303
    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

    #1158442
    Tom
    Lead Developer
    Lead Developer

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

    .page-hero {
        background-attachment: fixed;
        background-position: center center;
    }
    #1160427
    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.

    #1160682
    David
    Staff
    Customer Support

    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;
    }
    #1160779
    Bernhard

    Hi David,
    there is no change.

    #1161052
    David
    Staff
    Customer Support

    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.

    #1161123
    Bernhard

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

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.