Solved

Add footer background image to Dawn Theme.

Neelam_Kaur
Tourist
6 2 0

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.

Accepted Solutions (2)
HamishDavisonIC
Shopify Partner
62 9 66

This is an 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:

HamishDavisonIC_0-1631967025134.png

 

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 

HamishDavisonIC_1-1631967025152.png

 

 

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!

 

 

View solution in original post

Neelam_Kaur
Tourist
6 2 0

This is an accepted solution.

@ 

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”);
}

 

View solution in original post

Replies 13 (13)

Kinjaldavra
Shopify Partner
2302 570 1422

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
Tourist
6 2 0

Hi,

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

HamishDavisonIC
Shopify Partner
62 9 66

This is an 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:

HamishDavisonIC_0-1631967025134.png

 

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 

HamishDavisonIC_1-1631967025152.png

 

 

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
Tourist
6 2 0

This is an accepted solution.

@ 

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
Shopify Partner
62 9 66

 

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

@Neelam_Kaur

Neelam_Kaur
Tourist
6 2 0

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

HamishDavisonIC
Shopify Partner
62 9 66

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

Happy to help

 

Hamish

creatingmagic
Visitor
1 0 0

Hi Hamish -

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

Heidi

HamishDavisonIC
Shopify Partner
62 9 66

I made a video about this already 🙂

 

Saltandpineco
New Member
4 0 0

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
Shopify Partner
6 1 0

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
Excursionist
54 0 5

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
Tourist
9 0 1

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