scaling front page background image in Infinity Pro

[canpress5]

Has anyone tried to scale the main background image in section front-page-1 of the Infinity Pro theme for narrower screen widths?
The default behavior is that the image width is 'cropped' for narrower screen widths, but what if you want to show the whole (uncropped) image scaled for all screen widths?
Here is the default height:

.front-page-1 {
    height: 100vh;
}

if you change it to

.front-page-1 {
    height: auto;
}

the image is cropped top and bottom, so then you need to add padding to show the whole image, eg

.front-page-1 {
    height: auto;
    padding-top: 350px;
     padding-bottom: 350px;
}

this shows the whole image but the image does not scale down at narrower widths due to the padding. You could reduce the padding using media queries which is the default behavior in Infinity Pro for max-width: 800px, but this is not ideal if you need the whole width & height of the image to be shown for all screen widths.
Is there a way to have the background image scale down properly at narrower screen widths?

https://demo.studiopress.com/infinity/

[Brad Dalton]

This is the problem located in the front page styles :

.front-page-1 {
	 background-size: cover;
}

If you change the value to auto and wrap it in a media query, it scales down based on my testing. https://www.w3schools.com/cssref/css3_pr_background-size.asp

You need to write the custom CSS to override the default CSS

---

Get Help – Book Consultation.

[Author]

Posts