Solved

Changing Background Image Dawn 4.0.0

GRNorthwich
Tourist
14 0 1

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 🙂 

Accepted Solution (1)
LitCommerce
Astronaut
2860 684 732

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 31 (31)

JakeDoran
Shopify Partner
20 0 6

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 

Contact me at jake@influencemarketingauatralia.agency

Denishamakwana
Shopify Partner
1408 173 231

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

LitCommerce
Astronaut
2860 684 732

Hi @GRNorthwich,

Go to layout > theme.liquid file, find 'endstyle' and add code here:

Screenshot.png

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!

 

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
GRNorthwich
Tourist
14 0 1

Hi i have tried adding the code and its still just the block colour am i doing something wrong? 

Screenshot 2022-04-21 121503.png

LitCommerce
Astronaut
2860 684 732

Hi @GRNorthwich,

Please change url:

background-image: url("{{ 'Burst-Purple-aq8sdb.png' | asset_url }}");

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
GRNorthwich
Tourist
14 0 1

GRNorthwich_0-1650567945874.png

 

Hi this didnt seem to work 😞 

 

JakeDoran
Shopify Partner
20 0 6

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>

 

 

Contact me at jake@influencemarketingauatralia.agency
GRNorthwich
Tourist
14 0 1

Changed both of these and it hasnt added the background image 😞 

 

GRNorthwich_0-1650612320525.png

 

LitCommerce
Astronaut
2860 684 732

Hi @GRNorthwich,

Please add code here:

Screenshot.png

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

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
GRNorthwich
Tourist
14 0 1

Hi!  Thanks for your ongoing help! 

still not working 

 

GRNorthwich_0-1650628137652.png

 

www.geekretreatnorthwich.com

 

LitCommerce
Astronaut
2860 684 732

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
GRNorthwich
Tourist
14 0 1

Hi This just removed the background altogether 😞  

GRNorthwich
Tourist
14 0 1

website.PNG

 

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 

LitCommerce
Astronaut
2860 684 732

Hi @GRNorthwich,

This is not what you want?

Screenshot.png

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
GRNorthwich
Tourist
14 0 1

yes! 

GRNorthwich
Tourist
14 0 1

GRNorthwich_0-1650652196912.png

this is how its showing on my end though 

GRNorthwich
Tourist
14 0 1

GRNorthwich_1-1650652365097.png

 

GRNorthwich
Tourist
14 0 1

when i have this code 

GRNorthwich_0-1650654892046.png

this is what i see 

GRNorthwich_1-1650654938022.png

 

LitCommerce
Astronaut
2860 684 732

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

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
GRNorthwich
Tourist
14 0 1

so replace this: 

GRNorthwich_0-1650730564875.png

 

with the code above? thanks for the help! 

LitCommerce
Astronaut
2860 684 732

Hi @GRNorthwich,

Yes, you just need to change it, everything will work fine

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
GRNorthwich
Tourist
14 0 1

when i did that it just turned the background white? 😞 

LitCommerce
Astronaut
2860 684 732

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
GRNorthwich
Tourist
14 0 1

it worked! i was editing it them theme.liquid thankyou!! 

Smiley1311
Shopify Partner
47 0 15

@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.

 

LitCommerce
Astronaut
2860 684 732

Hi @Smiley1311,

Please change code:

background: {{ 'glitter.png' | asset_url }} no-repeat center center fixed !important;
LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
explicitbrand
New Member
14 0 0

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!

LitCommerce
Astronaut
2860 684 732

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
aabbcca
Tourist
4 0 2

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

catiedearest
Visitor
1 0 0

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

woolkind
Excursionist
23 0 5

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

 

woolkind_0-1670590745680.png