Change Background of section to an Image

[CedricH]

Hello.  I want to change the background of a section into an image. Is their a custom css that works for it. 

[Gabe]

Hey @CedricH 

You have reached the German community here but we can chat in English too, that's no problem!

Adding a custom background (BG) to a section depends on a few factors like what theme that is and what section. You will probably need to add it in the code and that can cause some issues if not done correctly such as slow down your page loading speeds and also exclude your theme from the theme updates.

you can use custom CSS to change the background of a section in a Shopify theme to an image. Before getting started, ensure that you have access to your theme's code editor, and also have the image you want to use uploaded to your Shopify files. Here's a general guide on how you might approach this:

Steps:

1. Upload the image:

• Go to your Shopify Admin.
• Navigate to Settings > Files.
• Upload the image that you want to use as a background.

2. Note down the image URL:

• After uploading, get the URL of the image by clicking on it.
• Copy the URL that is displayed.

3. Identify the section:

• Go to your website and right-click on the section you want to change and select "Inspect" (using Google Chrome or a similar browser).
• Look for a unique class or ID that you can use to target the section with CSS.

4. Add custom CSS:

• Go back to your Shopify Admin.
• Navigate to Online Store > Themes.
• Find the theme you want to edit and click Customize.
• Click on Theme settings.
• Click on Custom CSS.

If you can’t find a place to insert custom CSS directly within the theme settings, you might need to edit your theme’s code:

• Go back to Themes in the Online Store.
• Click on "Actions" next to the theme you are using and select Edit code.
• Find and click on your theme.scss.liquid file (or similarly named CSS/SCSS file) in the Assets directory.

5. Write and insert CSS:

• Now, insert the following CSS at the bottom of your custom CSS box or theme.scss.liquid file, adjusting the your-section-selector and image-url based on your specific details.

your-section-selector {
    background-image: url('image-url');
    background-size: cover;
    background-position: center;
}

Replace your-section-selector with the class or ID you found when inspecting the element and image-url with the URL you copied when you uploaded your image.

.section-class {
    background-image: url('https://your-shopify-store.com/path-to-your-image.jpg');
    background-size: cover;
    background-position: center;
}

6. Save and check:

• Click on Save.
• Visit your website and refresh the page to check if the background image has been applied to the section.

Some important notes:

• Always make a backup of your theme before making changes to avoid any unintended disruptions.
• Ensure your image is optimized for web use to prevent slow load times.
• Test your website on various devices to make sure the background image looks good on all screen sizes.
• Ensure the text on the new background is still readable and accessible.

If you follow these general steps and adapt them according to your specific theme and section, you should be able to successfully change the background of a Shopify theme section to an image. If you face any issues, consider reaching out to a Shopify expert or a developer for more detailed assistance.

[Mundo_Abricot]

Hello Gabe, 

i am currently also trying to have an image as section background.

At first thanks for the step-by-step introduction.

My problem ist that the background-image is not displayed correctly because of the gradient background color of the section color scheme. The section color scheme is always displayed on top. And i cannot remove it or disable it.

In the following screenshot you can see the background-image but also the gradient-color of the scheme. If i disable the gradient color and only use the normal color of the color schema then the background-image is not visible at all. 

Customer CSS

Gradient-background color which is displayed on top of the background-image

How can i solve this? I only want the custom CSS to be active. Thanks for the help!

[Divin3]

D

[CharBar93]

Hello

Site link: https://londonfermentary.myshopify.com/

I am using Monaco theme - password is transfer.

I am trying to add a background to the quote section on my homepage and it won't work.

This is the uploaded image URL: https://admin.shopify.com/store/londonfermentary/content/files/38966094266658?selectedView=all

Here is the code I am trying in my base.css file

.shopify-section spaced-section spaced-section--full-width {
background-image: url('https://admin.shopify.com/store/londonfermentary/content/files/38966094266658?selectedView=all'); /* Replace with your actual image URL */
background-size: cover; /* Ensures the image covers the entire section */
background-position: center; /* Centers the image within the section */
}

Below is the section I want to add the illustrations and below that is the illustration artwork.