[Resolved] is there a way to make an image overlay the header?

Home Forums Support [Resolved] is there a way to make an image overlay the header?

Home Forums Support is there a way to make an image overlay the header?

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #308816
    sdanbu

    I’m trying to add a design element that ‘sits’ on the bottom of the header and blends seamlessly into the page content, first section, etc.

    I want to add a semi-transparent image to the header that sits on the bottom of the header without any margin or padding.

    I also want to make it stretch to the width of the full screen.

    Is there a way to do this? I’ve tried to use the header content box…

    Thank you.

    #308848
    Leo
    Staff
    Customer Support

    Hi Scott,

    It’s a little hard for us to give you the CSS for it without a link to your site and seeing what you have so far.

    This post might give you some ideas on how to achieve it though: https://generatepress.com/forums/topic/float-logo-and-adjust-size-and-position-keeping-it-responsive/#post-246468

    Can you provide an example of what you are trying to achieve as well? Thanks!

    #308907
    sdanbu

    I put an image in the header content with transparency so that it overlaps the header background image and it’s supposed to blend seamlessly into the content right after it.

    The example of I want to do is
    1. make an image stretch to full screen (like here: http://stackoverflow.com/questions/16727713/cant-get-image-to-stretch-full-width)
    2. remove the spacing between the image and the first body content so it looks like it’s all one piece.

    (Thanks, a lot of stuff has worked so far. I’m embarrassed of my site so I don’t want to put it in the public forum!)

    #309008
    Tom
    Lead Developer
    Lead Developer

    Don’t be embarrassed! Everyone in here is in the developing stages of their websites ๐Ÿ™‚

    Perhaps you can email me a link to your website so I can see what you have so far? https://generatepress.com/contact/

    Also, if there’s a website you’re trying to replicate it would be great if you could include it too.

    Thanks!

    #310125
    sdanbu
    #310133
    Tom
    Lead Developer
    Lead Developer

    Instead of inserting the image into the content, something like this might work better:

    .page-header-content:after {
        content: url(URL TO YOUR IMAGE);
        position: absolute;
        bottom: 0;
    }

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

    #310155
    sdanbu

    When I did that, the picture still appears too high over the bottom of the header content fold (as if there is bottom padding).

    Also, when I resize the window to mobile etc. it doesn’t resize itself because it’s absolute.

    Do I need to make this arrow the header image and have current header image as a page background somehow or something?

    Thanks for your help.

    #310221
    sdanbu

    Instead of position: absolute;
    I tried position: relative;

    But is there another way to position images in the header content?

    For example on page https://www.sitepoint.com/css-center-position-absolute-div/
    .outer {
    position: relative;
    width: 40%;
    height: 120px;
    margin: 20px auto;
    border: 2px solid #c00;
    }

    .inner {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 10px;
    left: 50%;
    margin-left: -50px;
    background-color: #00c;
    }

    #310264
    Tom
    Lead Developer
    Lead Developer

    Try this CSS instead:

    .page-header-content {
        position: relative;
    }
    
    .page-header-content:after {
        content: url(URL TO YOUR IMAGE);
        position: absolute;
        bottom: -11px;
    }
    #310324
    sdanbu

    I tried it and it’s basically good- is there a way to use css like
    vertical-align: middle;
    so the apex of the graphic is always centered?

    #310343
    Tom
    Lead Developer
    Lead Developer

    You want it to float in the center of the background image instead of sitting on the bottom?

    #310350
    sdanbu

    No it’s fine on the bottom

    But the center of the transparent image is to the right of the center of the page.
    I’m hoping to center it responsively so that the arrow is always centered (while still on the bottom of the header).

    #310408
    Tom
    Lead Developer
    Lead Developer

    Hmm, right. Would have to switch the method for it to be responsive.

    Try this instead:

    .page-header-content:before {
        content: "";
        width: 100%;
        height: 100%;
        background-image: url(URL TO YOUR IMAGE);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center bottom;
        position: absolute;
    }
    #310461
    sdanbu

    It worked! Thanks!

    #310564
    Tom
    Lead Developer
    Lead Developer

    You’re welcome! ๐Ÿ™‚

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