Disable Image Repeat - Dawn Theme

[md249]

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?

https://1btdihb9c4nd5yg1-62631641145.shopifypreview.com 

[comercioservice]

@md249 

I hope you are well

Please go to

1) Online store

2) Themes -> Edit theme

3) Layout

4) base.css and paste this code on the end

#shopify-section-template--16906658938937__image_with_text_4WiMcG>div {
    background-image: url(/cdn/shop/files/section_1_-_Hero_Background_1920.jpg?v=1722865849);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

I hope it works for you, let me know, and If you'd like to discuss this more about this, don't hesitate to send me a PM/DM

[niraj_patel]

Hello @md249 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  #shopify-section-template--16906658938937__image_with_text_4WiMcG>div{
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      width: 100%;
      max-width: 100%;
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[BSS-TekLabs]

@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 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.