I am experiencing an issue where the CSS code is not displaying the background image properly.
.header {
height: 85vh;
background-image: linear-gradient(
to right bottom,
rgba(var(--color-primary-light), 0.8),
rgba(var(--color-primary-dark), 0.8)
),
url('/img/hero-small.jpg');
background-size: cover;
background-position: top;
position: relative;
}
Interestingly, when I remove the linear-gradient property, the background image displays correctly:
.header {
height: 85vh;
background-image: url('/img/hero-small.jpg');
background-size: cover;
background-position: top;
position: relative;
}
import styles from '@/app/_components/header.module.css';
const Header = ({children}) => {
return <header className={styles.header}>{children}</header>;
};
export default Header;