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.

Accepted Solutions (2)

Accepted Solutions
HamishDavisonIC
Shopify Partner
56 6 54

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 10 (10)
Kinjaldavra
Shopify Partner
2302 569 1405

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.

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
Neelam_Kaur
Tourist
6 2 0

Hi,

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

HamishDavisonIC
Shopify Partner
56 6 54

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
56 6 54

 

.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
56 6 54

@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

HamishDavisonIC
Shopify Partner
56 6 54

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