Goal: Adjust a Dawn theme image banner so the two columns are 50/50 and apply a pink wave image as the background for the text area on the right.
Proposed solution: A responder provided CSS targeting .banner (with background image, centering, no-repeat, fixed height, and flex centering) and instructions to add it to base.css or a custom CSS file.
Result: After adding the CSS, the original poster reports no visible change. The left column remains narrower than half, and the desired 50/50 split is not achieved.
Additional requirement: The poster wants the pink background on the right side aligned parallel to the left-side image and supplied the specific background image URL for use.
Assets: Multiple screenshots illustrate current and desired layouts; the background image URL was provided. These visuals are central to understanding alignment and layout.
Status: Unresolved. The provided CSS did not affect the block as intended, and further guidance (e.g., correct selector/structure for the image banner block and ensuring the background applies only to the text column) is needed.
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?
Hello! @jasminsharp97 Please follow these steps to add this CSS code:
.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.
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:
