[OH3] Styling background image of oh-location-card

[Eisi1482 (Sebastian Eisinger)]

Hi community,

I really love the new basic ui and the auto generated location and equipment tabs. What I haven’t figured out yet is how to style the background images of the oh-location-card? As my location images doesn’t fit the default size of the cards I’m looking for a way to configure the behavior.

The yaml representation which I have so far is very basic. What I want to achieve is that the image is not stretched to fill out the whole card which seems to be the default. Any ideas how to achieve this? And is there a documentation place where to look up the valid properties for an oh-location-card?

config:
  label: Home Page
locations:
  - component: oh-locations-tab
    config: {}
    slots:
      Groundfloor_Bathroom:
        - component: oh-location-card
          config:
            backgroundImage: /static/bathroom.jpg

I already tried to set different properties with a style block but wasn’t successful

Kind regards,
Eisi1482

[muelli1967 (Jan)]

you can manipulate the background image with something like this, you need to use position css whatever suits best:

        backgroundImage: /static/images/Badezimmer1.jpg
        style:
          postion: absolute

what turned out to be useful is to put some brightness to the picture in case the items on the badge in white are not well readable.

        backgroundImage: /static/Garagentor.jpg
        backgroundImageStyle:
          filter: brightness(60%)

[Eisi1482 (Sebastian Eisinger)]

Hi Jan,

thanks for your reply. I played around with position and size css and can’t get them to work. May depend that I’m not familiar with css

I have given a set of imho really nice location background images as the following one per example. They all are actually in upright format in their original. My thought was to put them as a background image where only the upper part is taken and should fill my oh-location-card.

I added some lines and text to see what part of the image is taken right now and no matter what I do it is always the center center part taken.

    slots:
      Outdoor:
        - component: oh-location-card
          config:
            backgroundImage: /static/outside.jpg
            backgroundImageStyle:
              position: right
              background-position: right

As from model-card.vue it seems to be that backgroundImageStyle must be set somehow and is then mapped to the style property of the image? But position and background-position don’t have any effect.

The other option would be to cut the images into the proper sizes. But what would that be? Also the size of an oh-location-card changes if it is clicked to show details

Any help would be appreciated or idea where to look at.

Kind regards,
Sebastian

[muelli1967 (Jan)]

a workaround on your problem would be to work with an image program to cut the part you want to see instead of trying to make it work, specifically as the image is upright. Should be the easiest way

Some good resources for looking into CSS positioning and learn quickly:

https://www.w3schools.com/cssref/pr_background-position.asp

background-position | CSS-Tricks

the model-card.vue gives some further good indication:

 .card-background
    position absolute
    left 0
    top 0
    width 100%
    height 100%
    object-fit cover
    object-position center

[muelli1967 (Jan)]

looks like you have some similar background images…just as a reference, for the page backgrounds i was using these CSS parameters, although making this work in location cards backgrounds is more difficult for upright position images.

  style:
    background-image: url(/static/images/Wallpapers/hk-Office1.jpg)
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover

spreads the background nicely over the page, independent of size ( PC or Iphone ).

[Sebastian1 (Sebastian)]

Hello,

where can I find out easily which commands go all in the location cards?

most of the ones I try don’t change anything.
For example, I tried to give the badges in the location-cards a background so that you can see them better in pictures or to change the font color did not work. the only thing I could find that works is that you can change the icon.

similarly stupid I am at the other tabs such as devices and co. Here I would like the background image always remains unchanged. Currently, the scaling of the background image is dependent on the screen size, so it looks stupid on some devices.

Do you have an idea what I can do?

Thank you!

[Matthias_Kaufmann (Matthias)]

I played around and got background images working. Currently the images are sometimes too big. How can I tell it to scale correctly?