Site content area: BG color above Background image

Hi there,

If you’re using an image that has transparency, such as a .png file, for example, the background colour will show through the transparent areas of that image. If you don’t want the background color to show through the transparent areas of the image at all, use a different image file type such as a .jpg

In your sample screenshot, my guess would be that the header image they used is a .jpg file so the background color doesn’t show through.

If I’ve missed the mark here, please let me know!

Hi Linda – Thanks for your reply. I’ve made some progress in that I’ve found a code snippet that is specific to the BG color of the sidebar:

div#secondary {
    border-style: solid;
    border-color: #ccc;
    border-width: 1px;
    padding: 5px;
	  border-radius: 20px !important;
    background-color: #eee;
}

I quite like that, and it sits on top of the site background image.

As for the content area, I can use the same:

div#content.site-content {
    border-style: solid;
    border-color: #fff;
    border-width: 0px;
    padding: 5px;
    background-color: #ffffff;
}

Which is fine for now, although I’d like to determine how to restrict the width so that the site BG image is visible on the edges. Not quite sure how to do that.

Hi there,

Glad you found some CSS that was helpful!! Can you please give us a specific URL that we can view so we know exactly what you’re trying to change? It doesn’t sound like you’re trying to make changes to your home page, but rather a category page perhaps since you refer to the background color of the sidebar? At this point, I can’t find a background image you’ve used, so a specific URL would be helpful.

We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.