[HELP] Set size of background image button-card

Configuration Frontend
,
1

Hi everyone, I would like to set the size, or at least the width of a background image, but I struggle to find a solution. I can only find solutions to set the size of the entire card, but that is not what I want.

Here is my button:
Screenshot_20230310_134605

And here is the code:

type: custom:button-card
entity: input_select.radiosender
show_state: false
show_name: false
show_icon: false
triggers_update:
  - input_select.radiosender
tap_action:
  action: call-service
  service: input_select.select_next
  service_data:
    entity_id: input_select.radiosender
hold_action:
  action: more-info
double_tap_action:
  action: more-info
styles:
  card:
    - background-color: transparent
    - height: 200px
    - background: |
        [[[
          var images = states["input_select.radiosender"].state; 
          return 'url(/local/pictures/radio-button/'+encodeURIComponent(images)+'.png) round'
        ]]]
    - background-size: cover
2

well, you’ve set it to cover now, so that is what it does… it adjusts to the card size.

what would you want it to do?

check CSS background-size property

3

Thank you for your answer. That is true. I want it to sit centred with a height of 200 px.

4

so first experiment with these W3Schools CSS background-size demonstration

currently you set the height of the card to be 200px, not perse the image.

resizing an image always has its issues, because it will change ratio, and the image will be distorted.

for the position: CSS background-position property :wink:

5

Thank you very much. Those link where great! Adding this three lines did it:

    - background-size: 200px 200px
    - background-position: center
    - background-repeat: no-repeat

So this is the result:
Screenshot_20230310_140115

With the whole code:

type: custom:button-card
entity: input_select.radiosender
show_state: false
show_name: false
show_icon: false
triggers_update:
  - input_select.radiosender
tap_action:
  action: call-service
  service: input_select.select_next
  service_data:
    entity_id: input_select.radiosender
hold_action:
  action: more-info
double_tap_action:
  action: more-info
styles:
  card:
    - background-color: transparent
    - height: 200px
    - background: |
        [[[
          var images = states["input_select.radiosender"].state; 
          return 'url(/local/pictures/radio-button/'+encodeURIComponent(images)+'.png) round'
        ]]]
    - background-size: 200px 200px
    - background-position: center
    - background-repeat: no-repeat
1 Like
6

always check W3 css :wink:

7

For some reasons these properties:

styles:
  card:
    - background-color: "#55555544"
    - background-position: center top
    - background-repeat: no-repeat
    - background: url('/api/image/serve/ca237c8f16b0e1435a10c3be8bdd7b57/512x512') round
    - background-size: 30%
    - border-radius: 3%
    - padding: 5%

don’t work for me: the background indeed repeats itselft.

immagine
immagine784×618 95.1 KB

is there something else that could cause this weird CSS behaviour?