How to make a Custom Liquids background transparent ?

Xzanderz · ‎09-27-2024

How to make a Custom Liquids background transparent ?
my custom css:
<div class="custom-background" style="text-align: center;">
<img src="https://cdn.shopify.com/s/files/1/0647/4589/8146/files/Black_and_White_Minimalist_Professional_Initi..." alt="Logo" style="width: 200px; height: auto;">
</div>

.custom-background {
background-color: transparent !important; /* Make this class transparent */
}
pls make this work on custom css

Xzanderz · ‎09-29-2024

I have fixed the problem with schemes

View solution in original post

BSSCommerce-HDL · ‎09-27-2024

Hi @Xzanderz, Can you kindly share your store URL with us? We will check it and suggest you a solution if possible.

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Xzanderz · ‎09-28-2024

Hi, ofcourse https://39c2fd-5a.myshopify.com/products/kids-heavy-cotton%E2%84%A2-tee

for example this frame:

I put this inside the custom css but it doesnt seem to work even I tried to change the color
<style>
.section-sections--17177527189666__custom_liquid_eNG3jG-padding {
background-color: transparent !important;
}
</style>

BSSCommerce-HDL · ‎09-28-2024

Hi @Xzanderz,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.custom-background img {
    filter: invert(0.1);
}
</style>

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Xzanderz · ‎09-29-2024

it didnt seem to work and Im sorry for misunderstanding. I wanted to say the background of the section like this:

<!doctype html>
<html class="js" lang="{{ request.locale.iso_code }}">

<style>
.section-sections--17177527189666__custom_liquid_eNG3jG-padding {
background-color: transparent
}
</style>

<head> (its above the head)

it doesnt seem to work. Even I tried to check it with changing the background color of the store but it didnt go transparent
The section I want: shopify-section-sections--17177527189666__custom_liquid_eNG3jG