Nativescript Background Image

Question

I'm trying to put a background image using CSS. What am I doing wrong?

Here is the HTML:

<Page backgroundImage="coverImage">
      <GridLayout>
      <!-- <page-router-outlet></page-router-outlet> -->
      <Label textWrap="true" class="h1 text-center">
        <FormattedString style="font-size: 35rem; font-weight: bold;">
          <span text="Welcome to " style="color: white; left: 50%;"></span>
          <span text="SmartHome" style="color: #F2E3BC;"></span>
        </FormattedString>
      </Label>
    <!-- <Image row="1" col="1"></Image> -->
  </GridLayout>
</Page>

Here the CSS:

.coverImage {
    background-image: url('~/assets/images/IntroductionBackgroundFirst.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

Answer 1

<Page class="coverImage">
  <GridLayout>
    <!-- Page content goes here -->
  </GridLayout>
</Page>

By adding the class="coverImage" attribute to the element, you are applying the .coverImage CSS styles to it, and the background image specified in the CSS should be displayed correctly.

Remember to double-check that the path to the background image is correct and that the image file IntroductionBackgroundFirst.png is in the correct location relative to your project structure.