How can I change the background image on Dawn 4.0.0?

[GRNorthwich]

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

[JakeDoran]

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

[Denishamakwana]

Welcome to shopify community.

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

Thank you.

[LitCommerce]

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!

[GRNorthwich]

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

[LitCommerce]

Hi @GRNorthwich ,

Please change url:

background-image: url(“{{ ‘Burst-Purple-aq8sdb.png’ | asset_url }}”);

Hope it helps!

[GRNorthwich]

Hi this didnt seem to work

[JakeDoran]

Hi @GRNorthwich

If you can change {% endstyle %} to

Your opening tag should also be not sure if you had put {% style %}

Should look like this

[GRNorthwich]

Changed both of these and it hasnt added the background image

[LitCommerce]

Hi @GRNorthwich ,

Please add code here:

Code:

If it still doesn’t work, please send me the site link, I will check it for you

[GRNorthwich]

Hi! Thanks for your ongoing help!

still not working

www.geekretreatnorthwich.com

[LitCommerce]

Hi @GRNorthwich ,

Please remove my previous tutorial code and add following code, it will work fine:

Hope it helps!

[GRNorthwich]

Hi This just removed the background altogether

[GRNorthwich]

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]

Hi @GRNorthwich ,

This is not what you want?

[GRNorthwich]

yes!

[GRNorthwich]

this is how its showing on my end though

[GRNorthwich]

[GRNorthwich]

when i have this code

this is what i see

[LitCommerce]

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:

It should work like the screenshot I sent