Untitled

<div className="w-100">
                    <Image src="../../../images/hero-books.png" className="img-fluid">
                        <div className="col-md-6 col-sm-12 align-center">ngcjhg</div>
                    </Image>
                </div>


update the above code to displauy the img in background, then there is this black translucent box on top of it and on that box there is header, text and button.
header code:
<Header
                                className="ux-rfi-heading"
                                labelKey="HHS_knowledgebase"></Header>

para code:
                            <Para className="ux-rfi-content mt-2" labelKey="header_content"></Para>

button code:
<div className="bg-white pt-2 rounded-bottom ux-rfi-black-border border-top-0 d-flex justify-content-center">
                                <Button
                                    id="knowledgeBase-btn"
                                    className="ux-rfi-white-button"
                                    labelKey="knowledge_base"
                                    click={() => Navigate.to('/hhs-knowledgebase')}></Button>
                            </div>