Changing background image/color for specific pages in DAWN theme

Store Design
, , , ,
1

Hi all,

I am having some issues with editing the code in my theme to make my page how I want it.

In short this is what I am seeking for:

Home page with one fixed background image, all the other pages with white background.

I added this code to base.css. It’s just some code I picked from a couple different forums to see if it would work. It sort of works, but the background image repeats on all the other pages, and also pops up as a background image if I have a drop down menu which I definitely do not want:

.gradient {
    background-attachment: fixed;
    background-image: url(https://cdn.shopify.com/s/files/1/0676/5959/6097/files/Screen_Shot_2023-05-17_at_2.11.45_AM.png) !important;
    height: 500px; /* optional */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;  
}

So my questions are :

  1. How do I get rid of the background image on other pages that are not my home page? (I want my other pages to have a background color of white and no image)

  2. How do I get rid of the background image on the drop down menu? (I want this to also be white) ((view photo to see what is happening please))

Screen Shot 2023-05-17 at 3.31.02 AM.png
Screen Shot 2023-05-17 at 3.31.02 AM.png1780×1228 590 KB

Thank you

2

Hi @lakras ,

Can you share your store url

3

Hello @lakras

Could you please provide your store URL and, if it is password protected, please share the password so I can review it and provide a solution?

4
  • Open the “base.css” file in the theme editor.
  • Locate the CSS code for the “.gradient” class that sets the background image.
  • Add a specific class to the tag on your home page, for example, “home-page”.
  • Modify the CSS code to exclude the background image on pages that don’t have the “home-page” class. The updated code will look like this:
.gradient {
  height: 500px; /* optional */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;  
}

.home-page .gradient {
  background-attachment: fixed;
  background-image: url(https://cdn.shopify.com/s/files/1/0676/5959/6097/files/Screen_Shot_2023-05-17_at_2.11.45_AM.png) !important;
}
​
5

hi yes, it is www.lakras.co

thank you!

6

hi yes, it is www.lakras.co

thank you!

7

thank you! unfortunately, this gets rid of the background image on the homepage :disappointed_face:

I realize that I am not sure how to add a specific class to the tag on my home page. Will try to figure this out then retry the code you provided.

the URL is www.lakras.co

8

thank you! unfortunately, this gets rid of the background image on the homepage :disappointed_face:

the url is www.lakras.co

9

Hi! Someone helped me add the tag. See photo for code I added to theme.liquid

I then added your code to base.css. It sort of works… A white background is being added, however, only as some kind of container and the home page photo remains. Please view the website for more info.
Screen Shot 2023-05-19 at 4.06.27 PM.png