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

Solved
thall009
Tourist
3 0 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!

Accepted Solution (1)

Accepted Solutions
dmwwebartisan
Shopify Partner
10710 2337 3311

This is an accepted solution.

@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!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Replies 6 (6)
AvadaCommerce
Shopify Partner
3034 696 566

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.

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE

thall009
Tourist
3 0 1
AvadaCommerce
Shopify Partner
3034 696 566

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.

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE

thall009
Tourist
3 0 1

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

Halothemes
Trailblazer
127 25 20

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
2. Go to Online Store -> Theme -> Edit code.
3. 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

 

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

HaloThemes - Top Premium Shopify Theme Provider

Ella Shopify Theme OS 2.0 - #1 Best Selling Shopify Theme of All Time
Check Our Portfolio for The Best Premium Shopify themes

dmwwebartisan
Shopify Partner
10710 2337 3311

This is an accepted solution.

@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!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →