Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Process Background image #87

Open
nem95 opened this issue Dec 1, 2020 · 0 comments
Open

Process Background image #87

nem95 opened this issue Dec 1, 2020 · 0 comments

Comments

@nem95
Copy link

nem95 commented Dec 1, 2020

Hello,

Is there a way to process background images?

Below I've added some example of code that I've tried.

The only way that is working is the let nameImg = './img/image.png';
and put the variable in the inline style

<script>
  import Image from "svelte-image";

  // import BgImage from '../static/img/shoe_prite.png';
  // import UnderbgImage from '../static/img/under_BG.png';

  let bgImage = './img/shoe_prite.png';
  let underbgImage = './img/under_BG.png';

</script>

<style>
  .main__container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 300px;
    height: 250px;
    background-image: url("../static/img/shoe_prite.png"), url("./img/under_BG.png'");
    background-repeat: no-repeat;
    background-position: center top, center;
    background-size: 100%;
  }
</style>


<div
  draggable="false"
  class="main__container"
  id="main__container"
  >
  <!-- style='background-image: url("{bgImage}"), url("{underbgImage}");' -->
</div>```
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant