Background image in Default home page Dawn Theme and transparent for rest of pages?

Store Design
1

Hi, I am using the following code below to maintain the header in one background and have another background image for the Default home page. However, the latter applies to all the other pages which I dont want to.

What is the code to ONLY have a specific background image in the main page? And keep the rest of pages transparent background.

Current code:

.gradient {
background: var(–gradient-background);
background-attachment: fixed;
background-image: url([url of image]) !important;
background-color: transparent !important;
background-position: center !important;
background-repeat: no-repeat;
background-size: auto !important;
}

.header-wrapper{
background-image: url([url of image]);
background-repeat: no-repeat;
background-size: cover;
}

/* Start /
header.site-header {height: 185px !important;}
@media only screen and (max-width: 768px){
header.site-header {height: 100px !important;}
.header-logo .lazyload__image-wrapper {max-width: 110px !important; }
header.site-header .header-logo { margin: 15px auto !important; }
header.site-header .site-header–text-links, header.site-header .site-header–text-links p {margin-bottom: 0px !important;}
}
/ End*/

Thank you!

2

Hi @ddddrs

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “theme.Liquid” file. Find the tag and paste the code below before the tag.

{% if template == 'index' %}

{% endif %}

And Save.

This only will show on your homepage.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Thank you! and how can i make the background image fit correctly between the header and footer? right now it looks zoomed and also goes into the footer which i dont want to

4

It is smae on the code you provide. There is background-position: center. Can i take a look on your store? Thanks!

5

I am looking for a code that makes my banner transparent in the default collection page

thank you!

6

Transparant Header**

7

Hi @Ambiancehome

Do you mean te banner on the collection pages?