Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
This is an accepted solution.
One of my subscribers just asked me this!!
Luckily I already have a video and medium article prepared
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:
First click settings then files
Then go to your online store and edit code on theme
Type base.css in the search and open it here
Click on line 269 then press enter two times:
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
This is an accepted solution.
One of my subscribers just asked me this!!
Luckily I already have a video and medium article prepared
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:
First click settings then files
Then go to your online store and edit code on theme
Type base.css in the search and open it here
Click on line 269 then press enter two times:
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
Worked first time! Thanks!!!!!!
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:
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:
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!!
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
same issue here. Did you find a solution?
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)
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!
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 ❤️
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024