How can I add images to the margins of my webpage?

[greenvalleycode]

Hello there! I need help with a customization for this page: https://greenvalleynutrition.com/pages/cbd-101-cannabinoid-science

I want to add images to the margins of the page, like this: https://cdn.shopify.com/s/files/1/0072/0676/4613/files/Untitled_design_4.png?v=1711637564

Any advice on how to do this?

[BrewBrains]

Hi @greenvalleycode ,

I have added the image on left, use below code as reference and you can add other in same manner. 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
   2. Open your theme.liquid file
2. Paste the below code before </body> on theme.liquid

<style>
.section-template--21903818326338__cf1ec130-207f-4d27-89fd-37a1af93b4e6-padding:after {
    left: 5%;
    top: 5%;
    border-radius: 0;
    position: absolute;
    background: url(https://greenvalleynutrition.com/cdn/shop/files/web_Green_Valley_Nutrition_r3_0133_copy.jpg?v=1691117827&width=1070);
    max-width: 254px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    transform: rotate(45deg); 
}
<style>

If you need any assistance feel free to get in touch. 

Was my reply helpful? Click Like to let me know!

Was your question answered? Mark it as an Accepted Solution.

[greenvalleycode]

Thank you so much! Is the theme.liquid file the best place to put this code? I don't want to bog down loading/response time by adding unnecessary code to the main template file. Also, how does this look on mobile view?

[BrewBrains]

@greenvalleycode 

If so you can paste the css on base.css at last. Do not add <style> and </style> as in CSS file you do not need to add these tag. 

Let me know if you require any support or have any queries. 

Was my reply helpful? Click Like to let me know!

Was your question answered? Mark it as an Accepted Solution.

[greenvalleycode]

Here's what it looks like. It's good, but appears behind text making it difficult to read. Mobile version looks more like a background image. Is there a way to ensure it stays in the margins and not behind page content?

[BrewBrains]

Yes we can do that need to write some custom code. Do you have any designs, how you want on mobile?

@greenvalleycode 

[greenvalleycode]

Hello again. I'd like the images to be positioned the way they are shown in the example image I included in the original post. It needs to look the same in both mobile and web versions. Let me know if you'd like to send a proposal for writing the custom code. Thanks!

[BrewBrains]

Hi @greenvalleycode , you can contact me directly via email or whatsapp.