I apologize if this question has already been addressed, but I have attempted some solutions that were recommended and none have been successful for me so far.
My issue lies in trying to add clickable links on top of a background image within a div element. Unfortunately, the links are not currently functioning as intended, and I am unsure of where the problem lies.
Below is the code I have developed thus far:
import '../../stylesheets/new_style.scss';
import React, {Fragment, useReducer, useState} from 'react';
import {Button, Col, Row, Modal} from 'react-bootstrap';
const NewGreeting = props => {
return (
<div className="full-page">
<Modal.Dialog>
<Modal.Body>
<p> Modal Content Here </p>
</Modal.Body>
</Modal.Dialog>
<div className='trial text-center'>
<a href="https://google.com">test</a>
</div>
</div>
);
};
export default NewGreeting;
Additionally, here is my CSS code:
.full-page {
background-image: url("./hello.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.trial{
display: block;
color: #474747;
font-size: 2.1em;
margin-top: 50vh;
}