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
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio