Html Question posted in
Some basic documentation can be found here.

Html – Having an issue to display background image with linear-gradient with css modules in Next 14

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;
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    I think its because you have a small mistake in the syntax.
    You must write to bottom right and not to right bottom.

    That’s how we talk about cardinal directions too, for example, we say northwest and not westnorth.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search