Shopify themes, liquid, logos, and UX
Hi,
im trying to change my background image on Dawn 4.0.0 ive tried a few tutorials they havnt worked.
i have the image in my assests and i want it to fill the whole background and not repeat or tile
Please help 🙂
Solved! Go to the solution
This is an accepted solution.
Hi @GRNorthwich,
I have checked and the code is still not changed, if it is difficult, you can follow the instructions below. Go to Assets > base.css and paste this at the bottom of the file:
#MainContent {
background: transparent !important;
}
body.gradient {
background: url("//cdn.shopify.com/s/files/1/0612/6796/8176/t/1/assets/Burst-Purple-aq8sdb.png?v=18148958983419832820") no-repeat center center fixed !important;
background-size: cover !important;
}
.gradient {
background: transparent !important;
}
Hope it helps!
Hi @GRNorthwich
Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).
If the store is not online yet, please go to Theme > Actions > Preview > Click the Share Preview Button at the bottom of the page.
* On this bar, click on the button Share Preview > Copy Link.
Note: Make sure you click on this button, do not share the URL on the top of your page because it won’t work.
When I have this ill be able to best help you. You can also send me a DM if that is easier.
Kind regards,
Jake
Welcome to shopify community.
Please share your store URL and if your store is password protected then please provide password too.
Thank you.
Hi @GRNorthwich,
Go to layout > theme.liquid file, find 'endstyle' and add code here:
Code:
#MainContent{
background-image: url("url image");
background-repeat: no-repeat;
background-size: cover;
}
with the url image uploaded in Assets and get it: {{ 'image.png' | asset_url }}
Hope it helps!
Hi i have tried adding the code and its still just the block colour am i doing something wrong?
Hi @GRNorthwich,
Please change url:
background-image: url("{{ 'Burst-Purple-aq8sdb.png' | asset_url }}");
Hope it helps!
Hi this didnt seem to work 😞
Hi @GRNorthwich
If you can change {% endstyle %} to </style>
Your opening tag should also be <style> not sure if you had put {% style %}
Should look like this
<style>
.eampleclass {
padding: 10px;
}
</style>
Changed both of these and it hasnt added the background image 😞
Hi @GRNorthwich,
Please add code here:
Code:
<style>
#MainContent{
background-image: url("{{ 'Burst-Purple-aq8sdb.png' | asset_url }}");
background-repeat: no-repeat;
background-size: cover;
}
</style>
If it still doesn't work, please send me the site link, I will check it for you
Hi @GRNorthwich,
Please remove my previous tutorial code and add following code, it will work fine:
<style>
body {
background: url("{{ 'Burst-Purple-aq8sdb.png' | asset_url }}") no-repeat center center fixed !important;
background-size: cover !important;
}
.gradient {
background: transparent !important;
}
</style>
Hope it helps!
Hi This just removed the background altogether 😞
it did it for background on some of the bodys we are making progress!
what i want is the image to get everything header footer etc
Hi @GRNorthwich,
This is not what you want?
yes!
this is how its showing on my end though
when i have this code
this is what i see
Hi @GRNorthwich,
On my previous answer you need to remove the code I instructed first, it is the current code you added and replace it with the following code:
<style>
body {
background: url("{{ 'Burst-Purple-aq8sdb.png' | asset_url }}") no-repeat center center fixed !important;
background-size: cover !important;
}
.gradient {
background: transparent !important;
}
</style>
It should work like the screenshot I sent
so replace this:
with the code above? thanks for the help!
Hi @GRNorthwich,
Yes, you just need to change it, everything will work fine
when i did that it just turned the background white? 😞
This is an accepted solution.
Hi @GRNorthwich,
I have checked and the code is still not changed, if it is difficult, you can follow the instructions below. Go to Assets > base.css and paste this at the bottom of the file:
#MainContent {
background: transparent !important;
}
body.gradient {
background: url("//cdn.shopify.com/s/files/1/0612/6796/8176/t/1/assets/Burst-Purple-aq8sdb.png?v=18148958983419832820") no-repeat center center fixed !important;
background-size: cover !important;
}
.gradient {
background: transparent !important;
}
Hope it helps!
it worked! i was editing it them theme.liquid thankyou!!
@LitCommerce I am trying to implement your solution that you posted above on 04-27-2022 to change the background to an image. I have to change this code to reference my image that is stored in my asset folder:
background: url("//cdn.shopify.com/s/files/1/0612/6796/8176/t/1/assets/Burst-Purple-aq8sdb.png?v=18148958983419832820") no-repeat center center fixed !important;
I tried this but it doesn't work:
background: {{ 'glitter.png' | asset_url | img_tag}} no-repeat center center fixed !important;
What is the correct coding?
Thank you for your help.
Hi @Smiley1311,
Please change code:
background: {{ 'glitter.png' | asset_url }} no-repeat center center fixed !important;
Hey,
So I copied the code and it worked everything is fine but instead of an image i chose a gif but it works perfectly on desktop but it glitches on mobile can you pls help, thank!
Hi @explicitbrand,
You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.
Ya, thx for the code it really works but the thing is i want it overlay on website and it is also applying to announcement bar i want it stop can you help pls
Is there a way to do this, but keep the header and footer their respective colors? When I use this code it takes away all color blocks on the site including the announcement bar, header, and footer.
I am brand new to Shopify and am wanting to get this squared away before investing too much time in designing then having to re do it all.
Preview Code: https://ubryuap6c5pznghb-61006282910.shopifypreview.com
Thank you so much for this code. After days I have finally got the background working on my store.
The only issues is that I would like to make the header and / or the footer solid as when I scroll the logo overlays on top of some of the text. Can you help?
Thanks
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024