This css doesn't display background image
.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;
}
The following code works without linear-gradient:
.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;
Actually I figured out the real reason is my variables were holding hex values while linear-gradient wants rgb. Because it is a CSS file it doesn't auto convert hex to rgb like it would do in SASS, for example.