I want to set my background as an image on Brooklyn theme please help

New Member
3 0 0

I've tried about 7 different means of achieving this, mostly code related from here. but NOTHING WORKS!!!! 

 

I just want to set a single image as the background for the main page of my store (home page)!

 

can someone please help me !

0 Likes

Hello @jeecaleeca ,
I am sending you one CSS code might be this will help you to add background image in to your Home page only.
Also please replace the image URL I have used in to this code and use yours.
Add this code at the bottom of your theme -> edit code -> assets -> theme.scss.css

body.template-index {
	background-image: url("//cdn.shopify.com/s/files/1/0803/6591/files/hero_slide_1_300x.jpg?v=1476890386");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 100% 100%;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
3 0 0

@oscprofessional wrote:

Hello @jeecaleeca ,
I am sending you one CSS code might be this will help you to add background image in to your Home page only.
Also please replace the image URL I have used in to this code and use yours.
Add this code at the bottom of your theme -> edit code -> assets -> theme.scss.css

body.template-index {
	background-image: url("//cdn.shopify.com/s/files/1/0803/6591/files/hero_slide_1_300x.jpg?v=1476890386");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 100% 100%;
}

so the URL is the whole link from the photo file? 

and when you say at the bottom of the theme, i have tried this a few times, - immediately after the last piece of text? on the next line? it hasnt worked so far :(

0 Likes
Shopify Staff
Shopify Staff
205 25 26

Hey there, @jeecaleeca!

 

Ryder here, from the Social Care Team at Shopify. Thanks for posting! I checked with our Theme Support Team to see whether this customization is something within our scope of support for themes, and instead learned that this is actually something that we would strongly advise against.

 

The reason we advise against it is because background images can lead to accessibility issues for visitors that can cause them to leave your site and negatively impact sales. The problem with using a background image is that it's going to make the text on the site difficult to read, lessening the impact of your products and information, and this can drive away customers and hurt sales. I really recommend you don't use a background image. There is a great article you can read here that explains some of the challenges a background image introduces to a website. If you're interested in learning more about accessibility, we have a guide with suggestions here. I hope this helps!

 

If you do decide to proceed with the customizations, I hope that you're able to accomplish the right look for your branding. If you are in need of any additional specialized theme help, you can also look into hiring an Expert. Best of luck with your store's user experience!

 

Cheers.

-

Ryder A. | Social Care Team at Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes