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

ddddrs · ‎04-21-2024

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!

Made4uo-Ribe · ‎04-21-2024

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 </body> tag and paste the code below before the tag.

{% if template == 'index' %}
<style>
.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;
}
</style>
{% 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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

ddddrs · ‎04-22-2024

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

Made4uo-Ribe · ‎04-22-2024

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

Ambiancehome · ‎08-05-2024

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

thank you!

Ambiancehome · ‎08-05-2024

Transparant Header**

Made4uo-Ribe · ‎08-05-2024

Hi @Ambiancehome

Do you mean te banner on the collection pages?

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

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

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

Community Blog Articles