How to add a Parallax Website texture to Dawn theme?

Solved
funkydropshippi
Tourist
7 0 0

Hello!

 

I would like to add a parallax website texture custom background image to my shopify 2.0 website - on dawn theme

 

Please could you help me?

 

 

Accepted Solution (1)

Accepted Solutions
HamishDavisonIC
Shopify Partner
56 6 54

This is an accepted solution.

@funkydropshippi 

 

One of my subscribers just asked me this!!

Luckily I already have a video and medium article prepared

How to add a Parallax Website texture to Dawn theme in under 5 minutes

If you’re a fan of branded websites — you’ll probably be wondering how to add a custom background texture to your Shopify website

 

Video:

Well, here goes

First we need to upload the image to our shopify backend:

funkydropshippi_0-1634843373683.png

 

First click settings then files funkydropshippi_1-1634843373840.png

 

funkydropshippi_2-1634843373670.png

 

Then go to your online store and edit code on theme

funkydropshippi_3-1634843373850.png

 

Type base.css in the search and open it here

funkydropshippi_4-1634843373552.png

 

Click on line 269 then press enter two times:

funkydropshippi_5-1634843373668.png

 

Copy the following code, replacing the URL with the URL you copied before:

body {
 
 border: 1px solid black;
 padding: 0px;
 background: url(“https://cdn.shopify.com/s/files/1/0581/0398/8373/files/Untitled_design.png?v=1634841212");
 background-attachment: fixed;
body:before {
 content: “”;
 display: block;
 position: fixed;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 z-index: -10;
 background: url(https://cdn.shopify.com/s/files/1/0581/0398/8373/files/Untitled_design.png?v=1634841212) no-repeat center center;
 -webkit-background-size: auto;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

And we are done

Hamish

View solution in original post

Replies 8 (8)
HamishDavisonIC
Shopify Partner
56 6 54

This is an accepted solution.

@funkydropshippi 

 

One of my subscribers just asked me this!!

Luckily I already have a video and medium article prepared

How to add a Parallax Website texture to Dawn theme in under 5 minutes

If you’re a fan of branded websites — you’ll probably be wondering how to add a custom background texture to your Shopify website

 

Video:

Well, here goes

First we need to upload the image to our shopify backend:

funkydropshippi_0-1634843373683.png

 

First click settings then files funkydropshippi_1-1634843373840.png

 

funkydropshippi_2-1634843373670.png

 

Then go to your online store and edit code on theme

funkydropshippi_3-1634843373850.png

 

Type base.css in the search and open it here

funkydropshippi_4-1634843373552.png

 

Click on line 269 then press enter two times:

funkydropshippi_5-1634843373668.png

 

Copy the following code, replacing the URL with the URL you copied before:

body {
 
 border: 1px solid black;
 padding: 0px;
 background: url(“https://cdn.shopify.com/s/files/1/0581/0398/8373/files/Untitled_design.png?v=1634841212");
 background-attachment: fixed;
body:before {
 content: “”;
 display: block;
 position: fixed;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 z-index: -10;
 background: url(https://cdn.shopify.com/s/files/1/0581/0398/8373/files/Untitled_design.png?v=1634841212) no-repeat center center;
 -webkit-background-size: auto;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

And we are done

Hamish

funkydropshippi
Tourist
7 0 0

Worked first time! Thanks!!!!!!

britt-blyth
Tourist
9 0 4

Hi @funkydropshippi @HamishDavisonIC ! I tried this and it did not work for me. Line 269 looks different on my end as well in the Dawn theme: 

brittblyth_0-1639351045729.png

 

I was able to find the area where you injected the code in the video further down in the coding (see below) so I tried adding the code here as well and it still did not work:

brittblyth_1-1639351111691.png

 

I'm not sure what I'm doing wrong or why my dawn theme coding looks different 😞 If you can help that would be amazing!!

 

Lea_culpa
Tourist
3 0 1

Same problem as you can see on the preview image below, my code area is on line 311 too and doesn't work... @funkydropshippi @HamishDavisonIC do you have a solution ? Thank you all in advance

 

result with the code paste on line 311result with the code paste on line 311

casarefreshment
New Member
1 0 0

same issue here. Did you find a solution?

Londan
New Member
1 0 0

Same problem as well - I ma guessing it is because we are using a newer theme than when this fix was made (i am using 4.0)

TAKEITEASYTHURS
New Member
1 0 0

Hi @HamishDavisonIC – Do you by any chance have an update to this solution? Seems like it's no longer working with the code currently in the Dawn theme as of 4 April 2022. As some users have mentioned, the code above line 269 now appears to be around line 328.

 

I've attached a text file with the current Dawn base.css FYI. Hope to hear back! 

kevinvi1
Tourist
10 0 4

hello Hamish!

Thanks for this great stuff!

by the way, it does not work for me. Line 269 is occupied with another code.. pls help me ❤️