A user is experiencing an issue where a background image in the hero section of their Dawn theme homepage repeats on larger screens instead of fitting properly.
Two solutions were provided:
CSS via theme.liquid: Add custom CSS before the </body> tag in theme.liquid to set background-size: cover, background-repeat: no-repeat, background-position: center, and width properties to 100%.
CSS via base.css: Add a media query targeting screens 750px and wider to the base.css file, setting background-size: contain !important for the specific section.
Both approaches use CSS to control how the background image displays and prevents repetition. The solutions target the specific section ID and adjust background properties to ensure proper image scaling across different screen sizes.
Hello,
I have uploaded an image as the background for the top hero section of my homepage. It appears that on larger screens, the image “repeats” and you can see it start over on the left and right sides. Is there any way to have the image just stretch to fit?
Hello @md249
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
@media screen and (min-width: 750px) {
.section-template--16906658938937__image_with_text_4WiMcG-padding {
background-size: contain !important;
}
}
Can you try add this code to last line file base.css @md249