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

[jasminsharp97]

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:

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):

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

How do I accomplish that?

[Huptech-Web]

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;
}

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.

[jasminsharp97]

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: