Add css classes astro-imagetools

[strange falcon]

Hello everyone, has anybody been able to add css classes to the "<BackgroundImage />" component using astro-imagetools, I already read the documentation but I couldn't figure out how to do it. Thank you!

[cursive cave]

Hey @strange falcon sorry I know this was posted ages ago... But if you add an attributes prop to it with an object, and then name the part of the background image you are targeting (most likely the container) and then set that to another object, with a key of class and value of whatever you want to set it to. Like so:

<BackgroundImage
  src="https://picsum.photos/1024/768"
  alt="A random image"
  attributes={{
    container: {
      class: "my-bg-class"
    }
  }}
/>

However, I believe the only way to style these is with global CSS as I'm not sure how to get the scoped styling to work on them as Astro doesn't pick up the class name when included via attributes like that... Let me know if you figure that one out!

[vital tusk]

Astro passes the scoped class as a prop to any component on the page so you could wrap your image in a component to scope it like ```jsx

const {
class: _class
} = Asto.props

<BackgroundImage
src="https://picsum.photos/1024/768"
alt="A random image"
attributes={{
container: {
class: _class
}
}}
/>

[cursive cave]

Ahh clever workaround nice idea! But would this not mean that you'd need a component for every image? Suppose you could extend it to have a src and alt attribute as well

[vital tusk]

Ya you can make it reusable by doing something like ```jsx

const {
id,
class: scope,
classes,
style,
...props
} = Asto.props

<BackgroundImage
{...props}
attributes={{
container: {
id,
class: ${scope} ${classes},
style
}
}}
/>

[cursive cave]

Ah very nice solution with {...props} I wouldn't have thought to do that, cool idea

Kind of answers my question on here actually as well#1055450404151898122