Add footer background image to Dawn Theme.

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

0 Likes
Natztech
Shopify Partner
2125 546 1300

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.

0 Likes
Neelam_Kaur
Tourist
6 2 0

Hi,

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

0 Likes
HamishDavisonIC
Excursionist
50 6 26

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

 

0 Likes
HamishDavisonIC
Excursionist
50 6 26

 

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

@Neelam_Kaur

0 Likes
Neelam_Kaur
Tourist
6 2 0

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

0 Likes
HamishDavisonIC
Excursionist
50 6 26

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

Happy to help

 

Hamish

creatingmagic
New Member
1 0 0

Hi Hamish -

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

Heidi

0 Likes
HamishDavisonIC
Excursionist
50 6 26

I made a video about this already

 

0 Likes