I want to use a retina image (a 2x version of a 1920x1080 image) as the hero image. However, when I use that image, it scales the image up to full resolution, instead of downscaling it to 1920x1080. How do I downscale a hero image properly and keep it in the center of the page, etc?
#hero-image.bgrelative { background: center center no-repeat scroll; background-size: cover; } #hero-image { background: center center no-repeat fixed; background-size: cover; }
I want to use a retina image (a 2x version of a 1920x1080 image) as the hero image. However, when I use that image, it scales the image up to full resolution, instead of downscaling it to 1920x1080. How do I downscale a hero image properly and keep it in the center of the page, etc?
Hi,
Please add this in Theme Options > Custom CSS;
#hero-image.bgrelative {
background: center center no-repeat scroll;
background-size: cover;
}
#hero-image {
background: center center no-repeat fixed;
background-size: cover;
}
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy