[Dawn Theme 2.4.0] Use image as background on mobile and desktop

Technical Q&A
1

Hello,

i tried to find code snippets/solutions that work to change the background to a desired image on dawn theme but i had no success. There were some solutions but none of them worked.

Here is a solution from @KetanKumar , but it also doesn’t work. https://community.shopify.com/c/shopify-design/background-image-in-dawn-theme/td-p/1310156

The background image has to display on both mobile and desktop, it should also be fixed.

The below code worked for a person who made a yt tutorial about it, however it was 1 month ago and doesn’t work anymore as the lines changed in the theme itself.

Tutorial link: https://www.youtube.com/watch?v=8nzYU4ZTWFY&list=PLWp81HWf5mTSv9fuaWAd6uteOIBNKk8jF&index=3&t=182s

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

I hope someone can solve it as there is no real solution for that at the moment, atleast the ones i found didn’t work.

Thanks :slightly_smiling_face:

2

Hi @Blaze420 ,

Go to Assets > base.css and paste this at the bottom of the file:

#MainContent{
	background-image: url(https://cdn.shopify.com/s/files/1/0537/7441/8092/t/2/assets/background2.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

Hope it helps!

1 Like
3

Thank you very much, it works like a charm! :slightly_smiling_face:

1 Like
4

What about for the header and footer?

5

Hi @dennismorris ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.