Vaadin-grid. Background image

Hi Vaadin-grid gurús,

I’m trying to replace the white background by one image, just, one image, not another color.

I’m trying but I find no way to do that

Thanks,

Hi! Here’s an example theme module for achieving this:

<dom-module id="grid-with-background" theme-for="vaadin-grid">
  <template>
    <style>
      #scroller {
        background-image: url("https://cdn.pixabay.com/photo/2016/06/17/06/04/background-1462755_960_720.jpg");
      }

      [part~="cell"]
:not([part~="header-cell"]
):not([part~="footer-cell"]
) {
        background: none;
      }
    </style>
  </template>
</dom-module>

You need to remove the background from the cells, so that their default white background doesn’t cover the image. I’ve excluded that rule from headers and footers, because otherwise the header and body cell contents will appear overlapping.

Hello!

I want to give the header line a background-color.

What I have got to do?

I tried a lot but nothing worked.

Thank you very much
Thomas

Hello Thomas!

Using this kind of selector in the theme module should do it:

      [part~="header-cell"]
 {
        background: lightblue;
      }

Hello Pekka!

Very good thank you very much.

Next question:

If I use a color with transparency e.g. --lumo-primary-color-10pct: hsla(214, 90%, 52%, 0.1) I will see the table lines behind the header while I am scrolling lines.

Is there a solution for this problem?

Thank you and many greetings
Thomas

I see… You can fix it by setting the color of the header row to white (the row is beneath the header cells, and normally has transparent background):

      [part~="row"]
 {
        background: var(--lumo-base-color);
      }

I mean my header background should be --lumo-primary-color-10pct: hsla(214, 90%, 52%, 0.1)

In this case I see the Table Data behind my transparent header.

Is there a solution for this? Of course --lumo-primary-color works because there is no transparency.

Thank you
Thomas

Yes, I understand. Adding the CSS for the row (in my previous message), together with your semi-transparent background on header-cell should fix it.

So, on the bottom you have the scrolling grid content. On top of that, you have the header row, which now should have white background to hide the scrolling content. On top of that, you have the header cells, which have the semi-transparent color.