Infinity Pro – Change the height of the home page background images

[smiley]

Hi,
The home page background images. Change to 1600 pixels wide and 250 pixels tall.
The default images are 1600 pixels wide and 1000 pixels tall.

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

[MikeB2]

This works in (style.css) for most themes:

html {
    background: url('https://yourdomain.com/wp-content/themes/your-child-theme-name/images/bg_image_name.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body { background: none;}

Oops, I saw you want to limit the height to 250px. The image will distort if you try to force it to 250px height.

[smiley]

Thanks but that doesn't work.
I have searched the css, functions & lib/customize.php without an answer.

[smiley]

That does not work MikeB2. Thanks anyway. Does anyone know how to solve this?

[andytc]

Infinity Pros Front-Page-1 has a VH unit set -

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

A further media query -

@media only screen and (max-width: 800px)
.front-page-1 {
    height: auto;
}

That forces it be the full height on whatever size device you're on, until it gets to that media query.

you could try changing the main entry to display auto and see if that helps with the height.

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

https://css-tricks.com/fun-viewport-units/

Viewport Height (vh) – Is a percentage of the full viewport height. 10vh will resolve to 10% of the current viewport height.

[smiley]

Many thanks andytc. That certainly explains it!

[smiley]

andytc you rock. That explains it so well. Thank You. 🙂

[smiley]

Thanks very much andytc. That explains it so well. 🙂

[Author]

Posts