Background image on home page does not fill section or show on mobile

Technical Q&A
1

Hello,

On my store, jetboyco.com, the background image was set but does not fill the entire section it is in. When I do get it to fill the section, the banner at the top of the page cuts off the top of the image and has white space below. It’s like the margins are mixed up and causing it to not work properly. Then if I switch from desktop to mobile, the image is zoomed in and looks really bad.

I need help making the image fit the section it is in and help it fit both desktop and mobile.

doesntfit.jpg
doesntfit.jpg1068×1512 148 KB

stilldoesntfit.jpg
stilldoesntfit.jpg2370×1500 416 KB

2

@jetboyco hope you are doing well.

It is because of below CSS code you have added below in your custom CSS part. Please remove this, and it’ll work fine.

webwondersco_0-1747959289927.png
webwondersco_0-1747959289927.png888×105 3.19 KB

3

Hello,

I did not build this out Initially and that is why I’m lost. May you please point me to the code you mention?

Thank you

4

Please use this code instead and check again

#shopify-section-template--21456904094007__b2c56f85-1a07-4ebf-8c25-768d389a8043 {
    background-image: url(https://cdn.shopify.com/s/files/1/0841/6696/7607/files/23_2.jpg?v=1745875660);
    background-repeat: no-repeat;
    background-size: cover;
}
5

Please add below line of code at the end and before the closing tag in thme.liquid file. @jetboyco
6

THANK YOU!! This fixed it

7

@jetboyco you can mark the reply as accepted solution so others can get the idea as well.