[Resolved] Header element image fit to screen

Home Forums Support [Resolved] Header element image fit to screen

Home Forums Support Header element image fit to screen

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #861131
    Tarko

    Hi, i would like to get the header element background image to adapt in screen height and width. Do i need to use some slider plugin with shortcode or is there a way to do this with GP only without plugins like i have done?

    #861205
    David
    Staff
    Customer Support

    Hi there,

    do you mean you want the image to always be 100% visible whatever the height / width of the browser is?

    If so its not possible when using a Full Screen layout as the containers aspect ratio would differ from that of the image. Its also tricky to do this when the images isn’t set full screen but the Element has content. Let me know.

    #861814
    Tarko

    Hi,

    It doesnt have to be full screen. I put it only full screen cause i tryid to get it work. I would like that the image height adapts to screen size. Like now i have 1080px high screen and image looks good. But if i check the page with smaller screen, like 900px high, the image goes over, and especially the arrow in the bottom of the image. Best option would be that the image would go 900px high also.

    #861860
    David
    Staff
    Customer Support

    The problem with trying to do this is the height will reduce in line with the browser width. Which would require the content to shrink considerably for it to fit in. Just to explain the issue add this CSS temporarily and make your browser width smaller:

    .page-hero {
        background-size: contain !important;
    }

    There’s quite a lot of variables to consider to get this to work.

    #862468
    Tarko

    Thanks for your answer. The background image can overlap in width ( that doesnt mind cause the image is only abstract image at the background.) My worry is to get the background image bottom border to be always as high as browser hight. I have done this before with sliders like metaslider or revolution slider, but i wanted to consider this as a option, doing it without plugins.

    #862618
    David
    Staff
    Customer Support

    Ok – so full screen ? What was the issue when you had the header element set to full screen?

    #863610
    Tarko

    Thanks,

    Full screen is the answer. And it works fine, IF i dont put my ( starting to hate :)) arrow-img in the bottom center of the element.

    Now, what have i done is that i put margin-top: 270px to the img css, but it doesnt work when going to smaller screens. How would you do it?

    Thanks again.

    #863807
    David
    Staff
    Customer Support

    OK, so you can use this CSS to position it:

    .page-hero {
        position: relative;
    }
    
    .page-hero a._mPS2id-h {
        position: absolute;
        bottom: 40px;
        left: 0;
        right: 0;
        padding: 0 100px;
    }

    The padding is to make the ‘click’ zone wider than the arrow.
    The bottom: 40px; keeps it 40px from the bottom of the screen, if you want to remove the space then change it 0;

    #865650
    Tarko

    Awesome, cant thank you enough! Super support! 🙂

    #865883
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.