Docs

[demonboy]

Hi,

I want to add a background image to my shop at http://www.followtheboat.com/shop. I have been able to do this with my blog, for which I use:

.blog .site {
    background-image: url("http://xxx.com/wp-content/uploads/2015/08/sailboat-thailand-tropical-holiday-esper.jpg");
       overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        /*background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top left;
}

I was hoping that by just replacing ‘blog’ with ‘shop’ this might do the trick, but it doesn’t. I know this one’s simple, but how do I achieve it?

Thanks in advance.

[Rupok]

Hi there,

You need to use .woocommerce.archive as selector instead of .blog selector. So it should be :

.woocommerce.archive .site {
    background-image: url("http://xxx.com/wp-content/uploads/2015/08/sailboat-thailand-tropical-holiday-esper.jpg");
       overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        /*background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top left;
}

You can also set background image for a page from Page Settings. So I’d suggest to do that instead of applying CSS.

Cheers!

[demonboy]

Thank you!

[Rupok]

You are welcome!

Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Cheers!

[Author]

Posts