Add a Background Image to Featured Collection on Homepage

[LibertyJason]

Hi, I was wondering if anyone had an insight on how to add a background image to the featured collection section of my front page. Every question asked have answers that haven't worked for me. Theme is TASTE. Thank you in advance!

[pythagoryan]

Hey dude! I can try to help you. Can you share the URL for your site?

[LibertyJason]

https://c29fc4-2.myshopify.com/

pass: milk

[pythagoryan]

Ta-da!

I did this with the following code:

.section-template--21383141261628__cbd01b2f-2d65-4656-860b-8cdb4b4547c2-padding
{
background-image: url(https://i.pinimg.com/originals/64/37/9f/64379fc….jpg);
background-size:cover;
background-postition:center;
}

All you have to do is replace the URL in the code to the URL of your image. To get this URL, Go to your Shopify Dashboard > Content > Files and click on the "Link" button in the rightmost column for the image.

Once that's done, paste the full code into the "Custom CSS" part of the Featured Collection section in the theme editor.

Let me know if by chance this doesn't work!

Cheers 🍻

[pythagoryan]

If this doesn't work, I recommend going to your theme editor, adding a "Custom Liquid" section into the header block, and pasting the following code:

<style>
.section-template--21383141261628__cbd01b2f-2d65-4656-860b-8cdb4b4547c2-padding
{
background-image: url(https://i.pinimg.com/originals/64/37/9f/64379fc….jpg);
background-size:cover;
background-position:center;
}
</style>

Change the URL of the photo before saving!

Then you'll need to add the following code to the "Custom CSS" area for the "Custom Liquid" section:

div
{
display:none!important;
}

While this is a very questionable method according to common front end design principles, there are no downsides and you will never have to re-add the code to your theme files when updating your theme.

[Made4uo-Ribe · Accepted solution]

Hi @LibertyJason 

Try 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 "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.collection.section-template--21383141261628__cbd01b2f-2d65-4656-860b-8cdb4b4547c2-padding {
    background-image: url('your-background-image.jpg');
    background-size: cover;
    background-position: center;
}

• And Save. 

[pythagoryan]

This is a better solution than mine if you aren't afraid of going into your theme's files and snooping around! Just bear in mind that if you ever update your theme you will have to add this code to your theme files each time.

[LibertyJason]

This worked! Thank you. I was having a hard time figuring out the container/section name from inspect element but you found it!

[Made4uo-Ribe]

Welcome. Find the section first and choose the one who will select all the section and try first to put the background color if it work then used it if not then find another div. 😆

[Brandingplusme]

When I paste the code in base.css how can i know in which collection 

i mean how can i put the name of collection i want to add for it the background 

[shimmera]

hi, i found this forum and i am trying to do the same. is the first line of your code above a string from that website? i copied and pasted it and just changed the image link to my theme but it didnt work. thanks for your insights.