Debut Theme - margin has overlay on image blocks

Store Design
1

Hello -

We’re working with the Debut Theme and the image blocks have a mysterious blue overlay on the margin. You can see it here in the header.

Screen Shot 2021-08-09 at 3.14.20 PM.png

We’ve tried uploading both png and jpg images for the logo but it didn’t fix the issue.

Thanks for the help!

Trésole Team

1 Like
2

Hello, can you please post the URL of your store?

3

@Tresole

Please share your store URL.

4

https://www.tresole.com/

5

@dmwwebartisan @drakedev

(UPDATE: The blue background behind header image is responsive to the browser window’s width. Resizing the width of the browser window causes blue area to grow/shrink.)

www.tresole.com is the URL for our store. Any insight you can offer would be greatly appreciated.

Regards,

Marston and the rest of the Tresole team

6

Hi @Tresole

the light bluish background is defined in the CSS element [data-image-loading-animation]

[data-image-loading-animation] {
  background-color: var(--global-color-image-loader-primary);
  -moz-animation: image-loader 2s 400ms infinite;
  -o-animation: image-loader 2s 400ms infinite;
  -webkit-animation: image-loader 2s 400ms infinite;
  animation: image-loader 2s 400ms infinite; }

I am really not sure if that is the correct behavior of the theme.

Anyway you can fix this behavior by adding this line of code at the end of file theme.css

[data-image-loading-animation] {
    background-color: transparent !important;
}