Find Out How To Use Eleventy Image Like I Describe.

[ghost]

here is the util: https://www.11ty.dev/docs/plugins/image/

Here is one successful way we're currently using it.

(a) The images on the site

Here is the code for that successful way of using it

The shorthand to display the image on home page:

where: https://github.com/cmneal26/Tech-Writing-Project/blob/main/_includes/layouts/home.njk

<span id="battle-ring">
  <h3 class="blue">Mongoose</h3>
  {# time to figure out how to use this for CSS background property #}
  {% image "./img/mongoose.jpeg", "an evil mongoose", "100vw" %}
  <h3>Snake</h3>
   {% image "./img/snake.jpeg", "a suspicious snake", "100vw" %}
</span>```

Two places that supports the above code:

shortcode image supporting above: https://github.com/cmneal26/Tech-Writing-Project/blob/main/.eleventy.js#L16

shortcode support for multiple formats:   

```javascript
  eleventyConfig.addNunjucksAsyncShortcode("image", imageShortcode);
  eleventyConfig.addLiquidShortcode("image", imageShortcode);
  eleventyConfig.addJavaScriptFunction("image", imageShortcode);

---

This works great for the images on the home page. We want to use this util for all of our images, for various reasons.

Anyway, there is one context in which I want to use this util that I wasn't able to figure out, and I thought perhaps you might be able to help with this.

Anyway, look at this: https://github.com/11ty/eleventy-img/issues/46

In that thread, there is this: https://www.zachleat.com/web/eleventy-image/#css-background-check

const Image = require("@11ty/eleventy-img");

module.exports.data = async function() {
  return {
    permalink: "/style.css"
  };
};

module.exports.render = async function () {
  let stats = await Image("nebula.jpg", {
    formats: ["jpeg"],
    widths: [600],
  });

  return `#hero-div {
    background-image: url(${stats.jpeg[0].url});
  }`;
};

You see how it's using the image utility with the CSS? That's what I want, but I wasn't able to figure out how to implement it yet, based on that example.

If you could figure this out, and explain it to me, that would be wonderful. If it takes too much time, don't worry about it, we're good for functionality. I just thought this was important to know how to do, if I ever used Eleventy in a more serious capacity.

Thank you.

[ghost]

@cmneal26 this is an example of a technical problem I couldn't easily solve, so I'm delegating to our SME.

[ghost]

I don't want to take up too much of our time on this, since it's not strictly necessary for us to complete our project.

Moving to backlog.