Scalable front image in Pulse 4.7

I am developing a site using the standard theme that comes with 4.7. I am having an issue with the full page image that is used on the front page and cannot get it to behave as we want.
It will always fill the entire height of the screen, and the sides of the picture will be cut off depending on the aspect ratio of the screen.
This is how it is supposed to behave, but we actually want it not to scale up, so that the full height of the image is displayed at full height but never larger.
This will mean that the width will still change, but I can put in large image border left and right to take care of that.

I have played with various figures in the Header styles section, including putting in a maximum height line, but nothing is working.
Time to ask a grown up!

Yes that’s 100% height (the hero image?!) fixed to the browser height, not the div. It will require a CSS change to do as you want.

Can you send a link in with what you have?

And hopefully someone can chime in with a tip :wink:

Yes, theoretically it could be fixed to 100% width instead.
The example in question is here:

where the client would like the green doors to be visible whichever way its viewed, but does not mind if it does not fill the screen vertically.

The other site I am working on at present is this one:

in this example we want the full height, and the edges left and right are peripheral. So its all good…

However I am puzzled by something on all example of sites using this template - the horizontal scroll bar at bottom.
I would LOVE to get a fix to get rid of that.

Instead of background images try to use the slider eg.

horizontal scroll bar =
The styles.css line 73 to adjust the “width: 100%;”


1 Like

Thank you! 100% instead or 100did the trick, perfect. The slider looks good and I shall def trt this on another project.

1 Like

Great @jdloudon - glad you found a solution

Great idea @IvaRo! :slight_smile:

1 Like

This topic was automatically closed after 11 hours. New replies are no longer allowed.