How to stop background image from repeating

Store Design
, , ,
1

Hi all!

I received some amazing help this morning and was able to add a background image to my homepage, but now as I’m adding pages, I’ve noticed that it is repeating on all other pages as well.

I’d like the background image to apply only to the homepage. Can someone please provide me with a fix?

This is the code I’m using on ColorBlock theme:

body {
background: url(“url_image_path”) no-repeat !important;
background-size: cover !important;
}

coteriecollective.myshopify.com

-teufra

2

To apply the background image only to the homepage and not on other pages, you can modify your code to add a specific class to the body tag of your homepage. Here’s an example:

On your homepage, add a class to the body tag like this:

html
<body class="homepage">

 

Then, modify your CSS code to only apply the background image to the body tag with the “homepage” class, like this:

css
body.homepage { background: url("url_image_path") no-repeat; background-size: cover; }

 

This way, the background image will only appear on the homepage because only the body tag on the homepage has the “homepage” class.

Make sure to remove the “important” declarations since they are not necessary in this case

3

Thank you for your reply! I’m completely new to this so my apologies. Would you mind explaining how to add a class to the homepage body tag?

4

Hello @summer11 ,

You can remove old code and

follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1677559633735.png
GemPages_0-1677559633735.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1677559649995.png
GemPages_1-1677559649995.png1467×898 76.1 KB

{%  if template contains 'index' %}
    
    {%  endif %}

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team