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

Solved

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

EGM1
Excursionist
22 0 8

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

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

Accepted Solution (1)

PageFly-Henry
Shopify Partner
1184 335 291

This is an accepted solution.

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 5 (5)

PageFly-Henry
Shopify Partner
1184 335 291

This is an accepted solution.

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

EGM1
Excursionist
22 0 8

Thank you very much for the help! 

PageFly-Henry
Shopify Partner
1184 335 291

You are welcome @EGM1 😊

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

JohnE10
Shopify Partner
115 14 19

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.

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com

Made4uo-Ribe
Shopify Partner
8879 2122 2609

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;
}

 

  • And Save.
  • Result:
    Made4uoRibe_0-1696761942639.png
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.