Question 272216 in CSS Question posted in
Some basic documentation can be found here.

Css – How to use DirectusImage tag as a background?

I am a newbie when it comes to using Directus. I am trying to style an card to have a background image of a Directus Image. How would i be able to do that?

I have tried:

<Card style={{backgroundImage:"url({someColletion.image.id})" >
    <CardHead/><CardContent />
</Card>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Style as following:

    <Container style={{position: "absolute">

    <DirectusImage style={{position:"relative"}} />

    Reference: https://www.w3schools.com/howto/howto_css_image_text.asp


  2. 0 
    Hope this can help, you have to pass imagePath to Card component and set the background inside Card component, you can not set it as Direct Image on react component

import backgroundImagePath from "../../assets/your_background_image.jpg";

<Card  imagePath=${backgroundImagePath}>
    <CardHead/><CardContent />
</Card>

Card.jsx

function Card({imagePath}) {

    return (
        <>
            <div style={{ backgroundImage: `url(${backgroundImagePath})` }}  >This is a div with background image </div>
        </>
    );
}
export default Card;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search