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
Explorer
52 6 42

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 2 (2)
HamishDavisonIC
Explorer
52 6 42

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

funkydropshippi
Tourist
7 0 0

Worked first time! Thanks!!!!!!