Add footer background image to Dawn Theme.

[Neelam_Kaur]

Hi!

I am trying to add Background Image to Footer Section on Dawn Theme. It was possible on Debut earlier any way can add to the Dawn theme as well.

[HamishDavisonIC · Accepted solution]

@Neelam_Kaur  How to add a background image to your footer on Dawn — Shopify 2.0 Tutorials

This will be a very simple guide to adding a background image to your Shopify 2.0 theme using Dawn as an example

Video:

First we have to add the image as an asset to the shopify backend:

Select your image

Once you’ve selected the image you will now have a new asset which you can call whenever you want

Now in section-footer.css 

At the very top you can just copy and paste this code:

background-image: url(“your_asset.png”);

This will call your image

If you want to have no repeat you can add:

background-repeat: no-repeat;

I hope this helps!

Hamish

If this helps you please accept as a solution to help others!

[Kinjaldavra]

hello @Neelam_Kaur 

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

[Neelam_Kaur]

Hi,

Store URl is https://neelamkaur.myshopify.com/, Store Password, yeente

[HamishDavisonIC · Accepted solution]

@Neelam_Kaur  How to add a background image to your footer on Dawn — Shopify 2.0 Tutorials

This will be a very simple guide to adding a background image to your Shopify 2.0 theme using Dawn as an example

Video:

First we have to add the image as an asset to the shopify backend:

Select your image

Once you’ve selected the image you will now have a new asset which you can call whenever you want

Now in section-footer.css 

At the very top you can just copy and paste this code:

background-image: url(“your_asset.png”);

This will call your image

If you want to have no repeat you can add:

background-repeat: no-repeat;

I hope this helps!

Hamish

If this helps you please accept as a solution to help others!

[Neelam_Kaur · Accepted solution]

@ HamishDavisonIC

You surely made this seem simple, however for some reason after following the steps i still could not see the background image on footer section. 

.footer {
border-top: 0.1rem solid var(--color-foreground-20);
background-image: url(“Footer_BG.png”);
}

[HamishDavisonIC]

.footer {
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
  background-image: url("wild_west_1.png");
}

@Neelam_Kaur

[Neelam_Kaur]

@HamishDavisonIC You are a savior! It worked. Thanks you so much 🙂

[HamishDavisonIC]

@Neelam_Kaur Could you accept the post with the video as a solution so more people see it?

Happy to help

Hamish

[creatingmagic]

Hi Hamish -

Did you also figure out how to add a background image to an entire page?

Heidi

[HamishDavisonIC]

I made a video about this already 🙂

[video]

[Saltandpineco]

I am following your instructions however no matter what I do it is not changing the background to an image. Please help? www.saltandpineco.com

[BL_Creative]

Thank you for this tutorial. I almost got it to work. I can see the image however it repeats. If I plug in 

background-repeat: no-repeat; 

I can't see the image at all. Any suggestions?

Also, is there an image size recommendation for this?

Thanks in advance.

[p1simgear]

Hi Hamish, thanks for the awesome video. Can you advise please how to set the image size for the footer background?  My image is huge and spans the whole screen. I'd like to restrict and size the image in the code somehow?

Thanks!

[mlobo9]

yes am having the same issue if anyone has a solution. I've managed to insert the imag einto the footer but it zooms into a small subsection of the large image that does not have an interesting visual. how could I adjust this? I tried changing the focal point on the image asset section where the image is uploaded but this also did not help

[tehreemfarooqi]

I did this but my image is too zoomed in. How do I fix that?

My code:

.footer {
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
  background-image: url("image.png");
  background-size: 0.01; /* Ensures the image maintains its natural size */
  background-repeat: no-repeat; /* Prevents the image from repeating */
}