[Resolved] Background shapes

Home Forums Support [Resolved] Background shapes

Home Forums Support Background shapes

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #634890
    Jamal

    Hi all

    I’m trying to copy a design where the header and section have a curved image applied as pseudo element background. The site is using .svg mostly but there is a .png file which i tried on my site without much success. Appreciate your help with this.

    https://smalloffice.hogia.se/

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #634940
    David
    Staff
    Customer Support

    Hi there

    are you trying to add this to the GP Page Header and / or to a GP Section?

    #635121
    Jamal

    I would like to add it to the page hero, the sections and the footer as well but i guess if i get it working right on one place i can workout how to get it right on the other places.

    I have added url to first post to show you what i have now, image looks rugged at edges and not the perfect shape as in example site. On the page hero i would love it if i can make it like they did on their site. Thanks in advance.

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #635194
    David
    Staff
    Customer Support

    Hi there,

    looks like you’re almost there. So i would suggest an SVG instead of the PNG to keep it sharp but also this:

    .page-hero {
        position: relative;
        padding-bottom: calc( 10vw + 100px );
    }

    And then on your .page-hero:after rule you can add bottom: 0;

    This will keep the shape locked to the bottom of the page-hero and keep the container padding responsive.

    #635508
    Jamal

    Thanks a lot David, it looks great now. I might come back with more questions later but for now this is resolved. Thanks for you and the team’s top notch customer service.

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #635545
    David
    Staff
    Customer Support

    Great to hear that !
    Something to think about, instead of targeting .page-hero directly use the Custom CSS class field, as you have that option in sections as well you could create a set of different shape dividers and just add the class where you need them ๐Ÿ™‚

    #635741
    Jamal

    That’s even better and makes it easier for me, thanks for the tip David.

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #635876
    David
    Staff
    Customer Support

    Awesome – glad to help ๐Ÿ™‚

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