Re: Make the columns on an image banner block 50/50 and add a background image.

Make the columns on an image banner block 50/50 and add a background image.

jasminsharp97
Shopify Partner
19 0 2

I'm currently working on a site using the Dawn theme, and I ran into an issue. I have a section of the site that I'm buidling with the image banner block, and it currently looks like this:

Screenshot 2024-06-06 154654.png

I want to make the two columns split evenly so we can see more of the picture. I also want the text box to have an image background (I have this pink with a wave as an image already):

Screenshot 2024-06-06 153213.png

 

The site is here: https://jmgtm3kbvyp3v383-60071346230.shopifypreview.com

 

How do I accomplish that?

Replies 2 (2)

Rishihuptech
Shopify Partner
676 126 135

Hello! @jasminsharp97  Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.
"If you need a pink background, please replace the image."

 

.banner {
    background: url(/cdn/shop/files/Group_6.png?v=1712541869);
    text-align: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0 !important;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

 

 

Rishihuptech_0-1717734713136.png

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
jasminsharp97
Shopify Partner
19 0 2

I tried adding that code to the base.css file, but nothing has changed on the block; the left side is less than halfway. Additionally, I want the pink on the right side to be parallel to the image on the left.

Here is the link to the pink background file: https://cdn.shopify.com/s/files/1/0600/7134/6230/files/Cloud_Nine_background.png?v=1717629775
Ideally I want it to look like this:

Screenshot 2024-06-06 153213.png