seepur/resources/scripts/applications/home/components/ProfileHeader.vue

<template>
  <section class="hero is-small p-t-xl p-b-xl is-light" :style="style">
    <div class="hero-body">
      <div class="container">
        <!-- <h1 class="title has-text-light">{{title}}</h1> -->
      </div>
    </div>
  </section>
</template>
<script lang="ts">
export default {
  name: "ProfileHeader",
  props: ["title", "background"],
  computed: {
    style() {
      const defaultCss = `
        background-image: url("/images/cloudgroup.png"), url('/images/sun+clouds.svg');
        background-size: contain, cover;
        background-position: center top, center right;
        background-repeat: repeat, no-repeat;
      `;
      const customCss = `
        background-image: url('${this.background}');
        background-size: cover;
        background-position: center
      `;
      const css = this.background ? customCss : defaultCss;
      return css;
    }
  }
};
</script>