[Resolved] Header element image fit to screen

[takkularapsis]

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?

[David]

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.

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

[takkularapsis]

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.

[David]

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.

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

[takkularapsis]

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.

[David]

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

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

[takkularapsis]

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.

[David]

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;

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

[takkularapsis]

Awesome, cant thank you enough! Super support! 🙂

[David]

Glad to be of help.

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

[Author]

Posts