I'm facing issues with applying CSS styles properly in my ReactJS/NextJS application. I am working on a component that displays an image with text overlaid on it. Despite testing the styles on w3schools, I cannot seem to get them to work correctly in my code. Attached are screenshots comparing my code to what was tested and how it appears on localhost:3000. The div tagged with imageContainer1 has a background-image set in the CSS file, but it doesn't display on the screen. Instead, the image displayed is from another div that includes inline styling (somewhere I can’t recall). Interestingly, when I try moving the styles from inline to style tags or the CSS file, they no longer apply consistently as before. This inconsistency in styling behavior confuses me.
My aim is to showcase an image spanning the full width of the viewport with text overlaying it. Any guidance on this issue would be highly appreciated.
https://i.sstatic.net/WMyxt.jpg https://i.sstatic.net/HhLav.png https://i.sstatic.net/3CCCc.png
import styles from './HomeContent.module.css'
const Home = () => {
return (
<div className={styles.container}>
<div className={styles.imageContainer1}></div>
<p className={styles.text}>
text
</p>
</div>
)
}
export default Home
.imageContainer1 {
background-image: url(../public/redtesla.jpg);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
max-width: max-content;
/* position: relative;
text-align: center;
background-color: blue; */
}
.container {
height: 100%;
margin: 0;
}
.text{
position: 'absolute';
top: '25%';
left: '10%';
color: "red";
}