Adding a background-image for a html element

[nunglert]

Hi all,
I started using Observable a few weeks ago and I really enjoy working with it!
I already managed to create tons of interactive animations with d3 and I'm about to compose them into a set of articles in a Framework website.

Since my background is more from scientific computing, I struggle a bit with the CSS / HTML I need to customize the style of my website. The problem is rather simple (at least I initially thought so..): In my index.md I would like to have a background image

<div class="hero" style="background-image: ...">
  <h1>
    My Research pages
  </h1>

  <h2>
    Welcome to my personal webpage, where I try to explain my research with the help of interactive visualizations
  </h2>

</div>

As far as I understand, I can get the proper url for the image like this

const img = await FileAttachment("img.png").url();

which seems to work in principle. However, I struggle to somehow plug this into the style parameter of the code block above. Does anyone know how to properly solve this? Any help is appreciated.

Thank you!

[Fil]

You could use a dynamic HTML code block:

```html
<style>
.hero {background-image: url(${FileAttachment("./img.png").href})}
</style>
```

(Note that I'm using the synchronous attribute file.href instead of the asynchronous method file.url() — both work equally but it feels simpler that way.)

[nunglert]

that solves it. Thank you!