How to change background color of Blog Articles

Store Design

Topic summary

Changing the background color on blog article pages in a Shopify store was achieved with custom CSS. The key fix targets only article templates.

  • Action taken: Add CSS at the bottom of assets/theme.scss.liquid or assets/timber.scss.liquid. Use selectors: .template-article main and .template-article .breadcrumbs with background-color: #fff.

  • Outcome: The original request was resolved; the article page background (and breadcrumbs) rendered white.

  • A separate request focused on the image area showing a pink background on scroll. The solution targeted the image wrapper.

  • Action taken: Add a media query (min-width: 1240px) for .Article__ImageWrapper, unset background-image, set height: 600px, and background-color: #a3bcb6.

  • Outcome: The image background color change was confirmed resolved.

  • New issue: Another store reports the CSS change only affects the page sides; the area behind the text remains non-white. A URL was shared, but no fix yet.

  • Status: Partially resolved overall; the latest question is open.

  • Technical notes: CSS selectors, Shopify theme asset files (theme.scss.liquid/timber.scss.liquid), media queries, and the article image wrapper/breadcrumbs are central. Code snippets are essential to the solutions provided.

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

Hello everyone,

Anyone have any idea how to change the background color on blog articles only?

Can not find any option, need to edit code? Any suggestion

Much appreciated

Thanks,

Alex

2

@Alex1510

Please share your blog page URL. I will check and provide a solution.

Thanks!

3

https://babyway.com.au/blogs/news/free-shipping

Thanks

1 Like
4

Hey @Alex1510

Try this CSS class.

Add code assets/theme.scss.liquid Or assets/timber.scss.liquid bottom of the file

.template-article main {background-color: #fff !important;}
.template-article .breadcrumbs {background-color: #fff !important;}

Hope this will work for you.

Thanks!

2 Likes
5

Thanks a lot! it looks great

6

Please could you take a look for me to? Many thanks :slightly_smiling_face:

7

How to change article image backgroud color?

8

@Iqrajput1120

Please share your store URL & screenshot what do you want!

Thanks!

9

https://www.olivetreearts.ca/blogs/art-scripture/art-scripture-painting-41-psalm-95-1-3

check this when I scroll image background color shows which is pink I want to change this color.

10

@Iqrajput1120

Please share store front password!

Thanks!

11

olivetree

12

@Iqrajput1120

which background color use for blog you want ?

13

Store front password olivetree

14

@Iqrajput1120

Add code assets/theme.scss.liquid Or assets/timber.scss.liquid bottom of the file.

@media screen and (min-width: 1240px){
.Article__ImageWrapper {
    height: 600px;
    background-image: unset !important;
    background-color: #a3bcb6 !important;
}
}
15

Thank you so much it solved.

1 Like
16

Hi, thanks for your help. This worked well for me but it only changed the sides of my blog post to white. Is there any way to get the background behind the text to turn white too? Have been trying to figure it out but getting nowhere. Example of how the blog posts look: https://mai-mo.com/blogs/journal/50-simple-actions-that-bring-joy . Thank you!