shop page fully transparent

Hey sitibus,
Thank you for your patience, to make the shop product thumbnail and container, and the product table transparent, please try this css:

#top.single-product .woocommerce-product-details__short-description table,
#top.single-product .woocommerce-product-details__short-description table tr {
	background: transparent;
}
#top.woocommerce-shop .inner_product.main_color,
#top.woocommerce-shop .inner_product_header {
	background-color: transparent;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad this helped, I believe that you are asking about setting your background image to “fixed” so it doesn’t move while the elements scroll over it, but there is a known bug in Safari that doesn’t support this on iPhones & iPads, Safari has known about this for a few years and doesn’t look like they are in a hurry to fix it.
So with this in mind if you want to try this please include admin login in the Private Content area so we can adjust the precious background css, if not let us know that we can close this thread.

Best regards,
Mike

Hi,
Ok, please clear your browser cache and check.

Best regards,
Mike

Hi,

Thank you for the update.

1-2.) This css code also applies the background image to the header container.

.page .container_wrap {
    background: url(https://www.toysanarchy.com/wp-content/uploads/2022/01/annie-spratt-scaled.jpg);
    background-attachment: fixed;
}

To retain the original header background, you have to replace the css code with this one.

.page #main .container_wrap {
    background: url(https://www.toysanarchy.com/wp-content/uploads/2022/01/annie-spratt-scaled.jpg);
    background-attachment: fixed;
}

Also, please note that container_wrap is a common class name, so the css code above will be applied on every sections in the page. You may have to adjust the css selector a bit so that the changes will be only applied on the intended sections. Adding a custom css class name to the sections should help.

// https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Best regards,
Ismael

Hi,

Did you toggle the Enfold > Performance > File Compression settings after adding the css code? Please make sure to purge the cache before checking the page, or just disable the compression and cache plugin temporarily while editing the site.

Best regards,
Ismael