How can I change the background color or image of a multirow element?

Store Design
1

Hello,
I would like to know if it is possible to add a background image or to change the color for a multirow element, marked with the red box. Thank you!

Untitled.png
Untitled.png1415Ă—875 118 KB

Here is the site: https://egeneralmarket.com/

2

Hi @EGM1

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

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

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.image-with-text__text-item.grid__item {

background-color: blue !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

3

Hi,

Here are the steps:

  • Go to your theme dashboard
  • Click “Online Store”
  • Click “Edit Code”
  • On the left column, find this file: “component-image-with-text.css”.
  • Scroll all the way to the bootom of the page and paste this code:
.image-with-text__text-item.grid__item {
 background: gray !important;
}

That’ll change the background color of the box, just replace “gray” with whichever color you’d like for your background.

To make the background an image, use this code instead:

.image-with-text__text-item.grid__item {
   background-image: url("Paste image URL here") !important;
}

Replace “Paste image URL here” with the correct URL, make sure you leave the double quotes.

Hope that helps.

4

Hi @EGM1

To change the background to image. You need to use this code.

  • 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:
.image-with-text__text-item.grid__item { 
background-image: url('background-image.jpg');
background-size: cover;
}
  • And Save.
  • For the color.
.image-with-text__text-item.grid__item {
    background: rgba(var(--color-foreground), 0.75);
}
h2.image-with-text__heading.h2.rte, .image-with-text__content.image-with-text__content--middle.image-with-text__content--desktop-left.image-with-text__content--mobile-center.image-with-text__content--adapt.content-container.gradient.color-background-1 {
    color: white;
}
5

Thank you very much for the help!

6

You are welcome @EGM1 :blush: