Shopify themes, liquid, logos, and UX
I have an image with text section on my website. I am trying to upload an image that has a transparent background, but you can see a border and white background appearing.
I would like to make sure that the image background remains transparent and have it apply to only this section in particular.
Website: www.danceddiction.com/pages/about-us
password: testword
Solved! Go to the solution
This is an accepted solution.
Hey @Danceddiction
Follow these Steps:
1) Go to the Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code at the bottom of the file above </body> tag
<style>
.section-template--18442698719487__image_with_text_nQxqbR-padding .image-with-text__media.image-with-text__media--adapt.global-media-settings.background-transparent.media {
box-shadow: unset !important;
border: unset !important;
background: transparent !important;
}
.section-template--18442698719487__image_with_text_nQxqbR-padding .image-with-text__media.image-with-text__media--adapt.global-media-settings.background-transparent.media img {
object-fit:contain;
}
</style>
Result:
If I helped you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Helal
This is an accepted solution.
Hey @Danceddiction
Follow these Steps:
1) Go to the Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code at the bottom of the file above </body> tag
<style>
.section-template--18442698719487__image_with_text_nQxqbR-padding .image-with-text__media.image-with-text__media--adapt.global-media-settings.background-transparent.media {
box-shadow: unset !important;
border: unset !important;
background: transparent !important;
}
.section-template--18442698719487__image_with_text_nQxqbR-padding .image-with-text__media.image-with-text__media--adapt.global-media-settings.background-transparent.media img {
object-fit:contain;
}
</style>
Result:
If I helped you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Helal
This worked!
Thank you! I do have another question though. While this did work, I prefer to keep my custom css in specific places. I have been making most of them in the base.css file. Is there any way to I can transfer this to that page instead?
If not no problem, this works beautifully!
You can add this CSS code to the base.css file instead of inserting it directly into the header.
.section-template--18442698719487__image_with_text_nQxqbR-padding .image-with-text__media.image-with-text__media--adapt.global-media-settings.background-transparent.media {
box-shadow: unset !important;
border: unset !important;
background: transparent !important;
}
.section-template--18442698719487__image_with_text_nQxqbR-padding .image-with-text__media.image-with-text__media--adapt.global-media-settings.background-transparent.media img {
object-fit:contain;
}
Thank you!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024