A user seeks to maintain the original resolution of their hero banner background image without any zooming or distortion, referencing an example site for the desired effect.
Proposed Solutions:
background-size property to auto instead of cover or contain to preserve original dimensionsobject-fit: contain on hero image/video elements via custom CSSCurrent Status:
One solution successfully prevented image distortion but created unwanted empty/white space around the banner. The user uploaded a screenshot showing the spacing issue and is now seeking guidance on removing this extra space while maintaining the original image resolution. The discussion remains open with the spacing problem unresolved.
How do i make it such that the image used for the background for the hero banner remain the same resolution? I dont want it to zoom in or out or alter the image in any way
website: https://www.scrawledsenses.shop (password: prodktzn)
example website of what i want to achieve: https://omnee.world
Hi Ktzn,
I like the preview page you have for scrawledsenses. To keep your hero banner at its original solution, you will need to adjust the CSS background settings. Before that, make sure you are using an image as background and CSS-based, and make sure to create a backup of your original code in case things go south and you need to revert back.
Under Edit Code > theme.css, apple the following:
.hero-banner {
background-image: url(‘your-image.jpg’);
background-repeat: no-repeat;
background-size: auto; /* Keeps original resolution /
background-position: center top; / Adjust as needed */
}
hey @ktzn you resize your banner to get better results
is this under theme.liquid, or do i have to find a theme.css?
and for the “your-image.jpg”, do i replace this with a link from my shopify files?
You can add this code to Custom CSS in Sales channels > Online Store > Themes > Customize > Theme settings and check again.
html .hero__image, html .hero__video {
object-fit: contain;
}
Hi @ktzn ,
Please go to Customize > Sections > Hero section > Custom CSS and add code:
@media screen and (min-width: 60em) {
.hero {
--section-height-medium: 160svh;
}
}
