Unable to position an image correctly

Configuration Frontend
1

I am trying to position an image in the middle of a picture-element, but all my tries failed and the image is always displayed on the bottom left corner with only a quarter of the image shown. I have tried different values for “top”, “left” and “translate”. This is my code:

type: picture-elements
image: local/Empty.JPG
title: Avfuktaren
elements:
  - type: image
    entity: switch.avfuktare_garage
    conditions: null
    state_image:
      'on': /local/GreenLight.JPG
      'off': /local/RedLight.JPG
    style: null
    top: 0%
    left: 30%
    transform: translate(0,0)

Any idea how to solve this?
Pic

2
  1. You posted an unformatted code. Go to toolbar - cog button - preformatted text.
  2. Anyway, it is clear that options like “top”, “left” are NOT inside the parent “style” option. Indents are crucial in yaml. That is why these position properties are ignored.
3

Thank you for your reply and for your advice to format the code correctly.

Based on the formated code above, are you able to help me finding what is wrong with the positioning of my picture and how to make it beeing placed in the middle of the background picture?

Thank’s in advance. :slight_smile:

4

But I have already gave you answer - wrong indents inside the “style” option.