How can I change the background color in Dawn 2.0?

Store Design

Topic summary

Goal: set a white background for the “Image with text” section while keeping the header and footer at color #131921.

Context: The store URL and access password were shared to enable assistance.

Proposed solution: Add custom CSS in Online Store → Theme → Edit code → Assets → base.css.

  • Set header/footer and newsletter input background to #131921.
  • Set the “Image with text” section’s text container background to white.
  • Ensure heading/content text in that section is black for contrast.

Key CSS (conceptually):

  • Target header/footer wrappers and newsletter input for #131921 background.
  • Target .image-with-text__text-item elements for white background.
  • Adjust .image-with-text headings/content to black text.

Technical notes: base.css is the theme’s stylesheet in Shopify; “Image with text” refers to a Dawn section. The provided CSS selectors are central to implementing the change.

Status: A clear implementation path was provided; confirmation of success from the requester is pending, so resolution remains open.

Summarized with AI on February 22. AI used: gpt-5.
1

I want to only change the background of the website, in this case; there is an Image with text section of the website that shares the background color of the header and footer. I would like the "image with text section to have a white background while the header and footer have 131921 color.

thank you

1 Like
2

Hi @Natlife ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

thank you, its www.nutrientc.us

121212

4

Hi @Natlife ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
.header-wrapper--border-bottom,
.section-footer-padding,
.newsletter-form__field-wrapper .field__input {
    background-color: #131921 !important;
}

.image-with-text .image-with-text__text-item>* {
    background: #fff !important;
}

.image-with-text .image-with-text__text-item .image-with-text__heading,
.image-with-text__content>*+*{
    color: #000 !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.