I need help with getting an image to show in shopify

I have some css code that works just fine, but now im trying to make the user choose the image, here is my liquid code that is meant for the image to show on the announcement bar.

                {% if block.settings.image != blank %}
                  <style>
                    @media screen and (min-width: 1000px) {
                      .announcement-bar {
                        background-image: url({{ block.settings.image | image_url: '300x' }});
                        background-size: 15% auto;
                        background-repeat: no-repeat;
                        background-position: calc(60%) center;
                        padding-right: calc(15%);
                      }
                    }
                  </style>
                {% endif %}

@ElmerBusch

can you please share the schema code too.

thanks

"blocks": [
    {
      "type": "announcement",
      "name": "t:sections.announcement-bar.blocks.announcement.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Welcome to our store",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.image.label"
        }
      ]