trying to add background behind slideshow, or make slideshow fit to screen

Store Design
, , ,
1

Hello!

Can someone please help me? This is my website: https://drizzilicious.myshopify.com/

Password is: drizzy

The slideshow (on homepage banner) was made with an app called POWR: image slider/carousel

I’m trying to either A.) add a background image behind the slideshow or B.) resize the slideshow so it FITS to the screen instead of gets so large you need to scroll.. does anyone know how to help??..

Thank you!!

2

Hi @Mattinnovations

Im not sure what do you like. But try this.

  • 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:

A.) add a background image behind the slideshow:

div#shopify-section-image-slider-template--18694670909735__e7a2d8df_1692823732 {
    background: aquamarine;
}

Ribe_Dagandara_0-1692909057247.png
Ribe_Dagandara_0-1692909057247.png1361×560 833 KB

B.) resize the slideshow so it FITS to the screen instead of gets so large you need to scroll

.multiSlider.hardDarkShadow {
    max-width: 100%;
}

Ribe_Dagandara_1-1692909133912.png
Ribe_Dagandara_1-1692909133912.png1365×530 961 KB

  • And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Thank you! but how can I get an image to show up as the background? I see that colors work but I wanted to try to put this image: https://cdn.shopify.com/s/files/1/0752/0760/6567/files/MicrosoftTeams-image_79_-PhotoRoom.png-PhotoRoom_1.png?v=1691185410 I added the link from my shopify content but that didn’t seem to work

4

Used tihs code. If you like to add image. You need to hange the URL for image.

div#shopify-section-image-slider-template--18694670909735__e7a2d8df_1692823732 {
     background-image: url("path/to/your/image.jpg");
}
5

Thank you!!!

6

Where do you add this code? Where you edit the slide show in the CSS part?

7

Did this end up working for you?