Support » Theme: Storefront » Site content area: BG color above Background image

  • Resolved meltdown2

    (@meltdown2)


    In the Storefront theme, you can select both a background image and a bg color. I would like to have the background color layer be visible above the site background, as in this example of another website.

    As it stands, if I add a background image the site text sits directly on that BG rather than on the Color, making it difficult to read.

    Is that confusing? Hopefully not impossibly so.

    Thanks

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Linda

    (@lindamork)

    Automattic Happiness Engineer

    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!

    Thread Starter meltdown2

    (@meltdown2)

    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.

    Linda

    (@lindamork)

    Automattic Happiness Engineer

    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.

    Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Site content area: BG color above Background image’ is closed to new replies.