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

Solved

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

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)

dmwwebartisan
Shopify Partner
12321 2551 3715

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 13 (13)

AvadaCommerce
Shopify Partner
3879 839 973

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.

banned
thall009
Tourist
3 0 1

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

 

The password should be, gaveat

AvadaCommerce
Shopify Partner
3879 839 973

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.

banned
thall009
Tourist
3 0 1

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

Halothemes
Trailblazer
168 30 44

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
Want to try Shopify? Open a Store for FREE

Bernadet
Visitor
1 0 0

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

dmwwebartisan
Shopify Partner
12321 2551 3715

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
mariamsuri3
Tourist
5 0 1

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?

EstebanVelasco
Visitor
1 0 0

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?

tburrus
Shopify Partner
2 0 0

It didnt work for my store. Can anyone help?

HUNDHAUS
Visitor
1 0 0

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?

 

shilpa_etsy
Shopify Partner
28 0 2

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

simplygolden
Visitor
2 0 0

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?