Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

wave shape page header

  • Hi,

    I have a grey wave background image showing on top of every page & post of my website. Mobile view uses a different variation of the wave, another image.

    See here desktop view
    See here mobile view

    Here is the CSS for it.

    background-image: url(“”);
    background-size: 100% 100%;
    background-repeat: none;
    padding-bottom: 70px;

    @media (max-width: 480px) {
    /* CSS in here for mobile only */

    background-image: url(“”);
    background-size: 100% 100%;
    background-repeat: none;
    padding-bottom: 70px;


    The pages other than Search Results, No Search Results, 404 Template, Author Archives and Front Page use a page header element, see screenpic

    Here is the screenpic of the page header element settings

    This page header element uses a shape of a grey wave, see element settings here
    for desktop
    for mobile (tablet settings are the same except height is 160px)

    I would like to know if the wave shape in the page header element is actually duplicated (second one hidden behind) on those pages, since the CSS seems to apply site-wide. (is it?)

    If yes, should I remove the shape 1 (grey wave shape) in the page header element?

    If I do this, would I need to reset the top padding values of the content?

    The wave in mobile view is the second version of the wave as stated in the CSS above “” SITE-WIDE.

    The page header element in element settings show the wave shape for mobile still the original shape, which is not seen in the browser (it should not be used and might be hidden), see same screenpic as mentioned above


    Please see link to site below.

  • fernandoazarcon2

    Hi Mel,

    No, it’s not duplicated.

    Mobile background overwrites the Desktop wave.

    It’s not on top of one another. Rather, the Desktop wave is replaced with the mobile wave. Only one image exists at a time.

  • Thanks,

    So even for desktop there is only one wave?

    As the CSS for desktop already sets a background image plus there is the Wave shape set for the pages using the page header element.

  • fernandoazarcon2

    Can you share a screenshot of the two background images your referring to in the backend?

  • Here are the 2 background images in the Media Library. They are added as a .header-wrap to the site in the CSS I pasted in my first post.
    for desktop & tablet:
    for mobile:

    BUT (and that’s why I suspect the image duplication):

    There is also an active page header element:
    (Block – Page Hero) set for entire site except Search Results, No Search Results, 404 Template, Author Archives, Front Page

    See the grey wave shape in the page header element content editor:
    It is the same for desktop, tablet and mobile in the content editor. (In tablet settings this shape has height: 160, in mobile settings height 100.)

  • fernandoazarcon2

    I’m not seeing the one from the Block Element – Page Hero.

    All I’m seeing is the one from the Header Element so as of now, there’s no duplication. If you can share admin login credentials, I can double-check.

  • Hi again,

    I actually saw the duplicate wave shape that was hidden behind the one set as background image by CSS (as sticky header) when I scrolled on my ipad mini.

    The CSS set the background image to the entire site.

    I would like to test taking away the wave shape for the page header elements it is used for, to see if the wave background image set via CSS still remains (it should). I will clone the elements first just to be save.

    My question is, if I delete the wave shape in the element settings, would it delete the shape all together for the whole site? Or only for this element? Can it be re-selected again for this element after it is deleted?
    Please see screenpic


  • Hi there,

    Shape in the elemnent.
    If you delete the shape it will only remove if from that element.
    And after you delete it you can re-select it again.

  • Thanks for all your help.

    I deleted the wave shape in the Elements as it was duplicated behind the CSS that set the wave as a background image.

    All good.

  • Glad to hear that

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