Problem with Persistent Black Background

Hello!

I have tried so many things to try and make a couple of my cards transparent but no matter how I try, it works as soon as I save the card, but when the song changes, it reverts to having a black background once again.

Does anyone know how to stop that from happening? Attaching a screen print where I have drawn a yellow box around one of the cards, with a big yellow arrow pointing at it.

And here is my current yaml (but know I have tried many different versions). You can see remnants of my attempts still present but don’t work - which I will remove once I figure this out:

  - type: custom:html-card
    view_layout:
      position: main
    content: |
      <div class="scroll-container">
        <div class="scroll-text">
          <span style="color: #2492ff; font-weight: bold; font-size: 18px;" id="scroll-content">[[ sensor.previous_artist_4 ]]</span>
        </div>
      </div>
      <style>
      .scroll-container {
        overflow: hidden;
        white-space: nowrap;
        width: 200px !important;
        background: transparent !important;
      }
      .scroll-text {
        display: inline-block;
        position: relative;
      }
      @keyframes scroll-left {
        from {
          transform: translateX(100%);
        }
        to {
          transform: translateX(-100%);
        }
      }
      </style>
      <script>
      (function() {
        const scrollContainer = document.querySelector('.scroll-container');
        const scrollText = document.querySelector('.scroll-text');
        const scrollContent = document.getElementById('scroll-content');
        
        if (scrollContent.scrollWidth > scrollContainer.clientWidth) {
          scrollText.style.animation = 'scroll-left 10s linear infinite';
          const distance = scrollContent.scrollWidth + scrollContainer.clientWidth;
          const duration = distance / 50; // Adjust speed here
          scrollText.style.animationDuration = duration + 's';
        }
      })();
      </script>
    style:
      top: 76.7%
      left: 88.75%
    card_mod:
      style: |
        ha-card {
          background: transparent !important;
          padding: 0px !important;
        }
        :host {
          background: transparent !important;
        }

I wonder, is here a dedicated thread for this card? May be it is better to ask there?
In other cases I would suggest asking in the main card-mod thread, people will definitely help.

Edit: the response that was here was posted in error. It was meant for someone I was helping lol.

All set to fix YOUR issue?

@LiQuid_cOOled , no, I haven’t figured out a resolution yet. I posted a reply here by accident that was meant for somebody else that I was helping. It was unrelated to this post so I’ve edited my comment. If you happen to know of a way to fix this I’d be grateful! Aside from that I will post under card_mod…

This could be a specificity of this particular card. That is why I suggested you to find a dedicated post for this card.
Meanwhile you should check with some stock card to see if your similar styling works.

Thank you! I need the HTML card in order for scrolling to work. Unless you know of another way I can have text scroll?

If you need this card to display a text - a stock markdown card can be used. It is possible to add a scrollbar (described in card-mod thread).
Btw, do you mean a “marquee” (automatically scrolled) text?

Yeah, I’m open to other methods, but I can’t remember why, but marquee didn’t work for some reason before, which is why I went with using the html card.

Never tested a marquee, suggest to ask in card-mod thread how to create it in markdown with card-mod.

I was able to get some help from someone else who was quick to answer my post on github. Here is the corrected code using the html-template-card instead of html-card:

  - type: custom:html-template-card
    view_layout:
      position: main
    picture_elements_mode: true
    ignore_line_breaks: true
    content: >
      <div class="scroll-container" style="width: 170px !important; overflow:
      hidden !important; height: 45px !important; background: transparent
      !important; white-space: nowrap !important; position: relative
      !important;">
        <div class="scroll-text">
          <span style="color: #2492ff !important; font-weight: bold !important; font-size: 18px !important; white-space: nowrap !important; display: inline-block !important; line-height: 30px !important; padding: 4px !important;" id="scroll-content">
            {% if states('sensor.previous_song_4') %}
             {{ states('sensor.previous_song_4') }}
            {% else %}
              No Data
            {% endif %}
          </span>
        </div>
      </div>

      <style>
        .scroll-container {
          width: 170px !important;
          overflow: hidden !important;
          white-space: nowrap !important;
          position: relative !important;
          height: 45px !important;
          background: transparent !important;
        }
        .scroll-text {
          display: inline-block !important;
          position: relative !important;
          animation: scroll-left 10s linear infinite !important;
        }
            @keyframes scroll-left {
              from {
                transform: translateX(100%);
              }
              to {
                transform: translateX(-100%);
              }
        }
      </style>

      <script>

      (function() {
        window.addEventListener('load', function() {
          const scrollContainer = document.querySelector('.scroll-container');
          const scrollText = document.querySelector('.scroll-text');
          const scrollContent = document.getElementById('scroll-content');

          if (scrollContainer && scrollText && scrollContent) {
              if (scrollContent.scrollWidth > scrollContainer.clientWidth) {
                  const distance = scrollContent.scrollWidth + scrollContainer.clientWidth;
                  let scrollDuration = distance / 50;
                  scrollDuration = Math.max(5, scrollDuration);
                  scrollText.style.animationDuration = scrollDuration + 's !important';
              } else {
                scrollText.style.transform = 'translateX(0) !important';
                 scrollText.style.animation = 'none !important';
               }
            }
          });
      })();

      </script>
    style:
      top: 76.7%
      left: 87.75%
    card_mod:
      style: |
        ha-card {
          background: transparent !important;
          padding: 0px !important;
          box-shadow: none !important;
        }
        :host {
          background: transparent !important;
        }