HELP - How to add a background picture in Dawn theme (the simplified way)

Store Design
1

Hello! I am NOT a coder. After searching the database, I came across a code, but it didn’t work for me. I want to use this background: https://unsplash.com/photos/R53t-Tg6J4c. The grainy background itself. Can someone help? And be specific about where to copy and paste?

Thank you!

2

Hi @thall009 ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

It’s, https://prettypolishedhair.myshopify.com/

The password should be, gaveat

4

Hi @thall009 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
body {
    background-image: url(https://cdn.shopify.com/s/files/1/0581/7437/4095/files/bg.avif?v=1649205369) !important;
    background-color: transparent !important;
    background-position: top left !important;
    background-size: auto !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

5

I copied and pasted the code. I do not see the grainy image.

6

Hi @thall009 ,

If you use dawn theme, you can try follow the instruction below:

  1. Please download the image you want to use on your computer. Go to Online Store → Settings → Files then upload image in the Files and copy url of image.

Ex:

Screenshot_1.png
Screenshot_1.png1918×909 110 KB

  1. Go to Online Store → Theme → Edit code.
  2. Asset → /base.css paste code below into end of the file. Please change the url in the code to your url of the image.
.gradient {
    background: var(--gradient-background);
    background-attachment: fixed;
    background-image: url(https://cdn.shopify.com/s/files/1/0461/7633/8071/files/nordwood-themes-R53t-Tg6J4c-unsplash.jpg?v=1649213231) !important;
    background-color: transparent !important;
    background-position: top left !important;
    background-size: auto !important;
}

Screenshot_3.png
Screenshot_3.png1904×772 80.1 KB

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

7

@thall009

Please add the following CSS code to your assets/base.css bottom of the file.

.gradient {
    background: var(--gradient-background);
    background-attachment: fixed;
    background-image: url(https://cdn.shopify.com/s/files/1/0461/7633/8071/files/nordwood-themes-R53t-Tg6J4c-unsplash.jpg?v=1649213231) !important;
    background-color: transparent !important;
    background-position: top left !important;
    background-size: auto !important;
}

Thanks!

8

I wanted to know how I can add a repeat image as a background in the dawn 5.0 theme. Can anyone help with the code?

9

I did exactly what u said and it worked but i had to replace (background-size: cover !important;)

auto word to cover because only half of my image was visible. Thank u

10

Is there a way I can have the background image at a different transparent %. Instead of the image being at 100%, if I wanted the image to be at a 65% transparency?

11

Hi! This code works, but it is also applying to the header and footer. How can I make sure it only applies to the body?

12

It didnt work for my store. Can anyone help?

13

This worked to add the photo to the background, but it added the image separately to each section. For example it shows the image as the background of the image banner then separately as the background for the rich text instead of one continuous image for the whole web page. Is there anyway to have the one image applied to all sections evenly?

14

Hello !! I’m using this code but it is not working, but can you please help ??? pleaseeeee it’s really urgent, pleaseeeeeeeee thank youuuuu !