i need help repositioning a background image on my website using code

[emotionaldebt22]

i used this code to add a background to my website. but as you can see it looks too zoomed in. what should i fix in order for it to fit only on the product section? i want to avoid the header section. thanks!

<style>
body.gradient {
background: url(https://cdn.shopify.com/s/files/1/0564/8262/7632/files/IMG_1466.jpg?v=1678612396) !important;
background-position: center center;
background-repeat: no-repeat !important;
background-size: cover !important;
background-attachment: fixed !important;
}

.gradient {
background: rgb(29 27 27 / 0%)
}
.footer.gradient,
header-wrapper {
background: rgb(29 27 27/ 0% )
}
</style>

 

[Ignelis]

To make the background image fit only on the product section, you need to modify the CSS selector. Currently, the CSS selector is targeting the entire body of the page. To avoid the header section, you can create a wrapper div around the product section and target that div instead. Here's an example:

HTML:

<div class="product-wrapper">
<div class="product-section">
<!-- your product content here -->
</div>
</div>

CSS:

.product-wrapper {
background: url(https://cdn.shopify.com/s/files/1/0564/8262/7632/files/IMG_1466.jpg?v=1678612396) !important;
background-position: center center;
background-repeat: no-repeat !important;
background-size: cover !important;
background-attachment: fixed !important;
}

.product-section {
/* add any styling for your product section */
}

.footer.gradient,
header-wrapper {
background: rgb(29 27 27/ 0% )
}

By targeting the .product-wrapper div, the background image will only appear in that section, which should avoid the header section. Additionally, you can add any necessary styling to the .product-section class to adjust the layout and appearance of your product content.

[emotionaldebt22]

hey what would you recommend to type in the /* add any styling for your product section */

[GemPages]

Hello @emotionaldebt22 

It's GemPages support team and glad to support you today.

Could you please share your store URL ( with the password if your store password is enabled ), and the custom font name that you are using? Then I can see and suggest something for you.