Add background image to top of product page.

If you could please preview the link I posted to “Private Content”. You will see I have placed the image gallery and product data into a box with a white background and a drop shadow.

The background-area has a light grey background. I am looking at placing a background image in this area but im really struggling. An example of the effect I am trying to implement can be seen on the other link in “Private Content”.

Many thanks,

Hello,

Please add this code to the Theme Settings > Custom CSS

.single-product-content > .container {
    max-width: 100%;
    width: 100%;
    margin-top: -40px;
        margin-bottom: 0!important;
    padding-top: 40px;
    padding-bottom: 40px;
      background-image: url(https://www.fjallraven.co.uk//media/i/2240x1320_General-background_photo_lassic16_6880-14296-0.jpg);
        background-position: 50%;
        background-size: cover;
}
.single-product-content .product-image-summary-wrap {
    max-width: 1192px;
    margin-left: auto;
    margin-right: auto;
}

Best Regards

I added:

:first-child

As it displayed the image behind related products section further down the page.

.single-product-content > .container:first-child {
    max-width: 100%;
    width: 100%;
    margin-top: -40px;
        margin-bottom: 0!important;
    padding-top: 40px;
    padding-bottom: 40px;
      background-image: url(https://www.fjallraven.co.uk//media/i/2240x1320_General-background_photo_lassic16_6880-14296-0.jpg);
        background-position: 50%;
        background-size: cover;
}
.single-product-content .product-image-summary-wrap {
    max-width: 1192px;
    margin-left: auto;
    margin-right: auto;
}

Thank you for helping me so fast!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts