How to Set background Image in NextJS

There are several ways to set background images in Next.js:

1. Inline Styles

Directly use the CSS background-image property within the style attribute of an element to set the background image.

jsx
function Home() {
  return (
    <div
      style={{
        backgroundImage: 'url(/path/to/your/image.jpg)',
        backgroundSize: 'cover',
        height: '100vh', // Example sets the element height to 100% of the viewport
      }}
    >
      {/* Content */}
    </div>
  );
}

export default Home;

2. External CSS File

Create a CSS file in Next.js and import it into your component.

css
/* styles/Home.module.css */
.myBackground {
  background-image: url('/path/to/your/image.jpg');
  background-size: cover;
  height: 100vh;
}

jsx
// pages/index.js
import styles from '../styles/Home.module.css';

function Home() {
  return <div className={styles.myBackground}>{/* Content */}</div>;
}

export default Home;

3. Styled JSX (Next.js Built-in CSS-in-JS Library)

Next.js includes Styled JSX, allowing you to write CSS directly within the component file.

jsx
function Home() {
  return (
    <>
      <div className="myBackground">
        {/* Content */}
      </div>
      <style jsx>{`
        .myBackground {
          background-image: url('/path/to/your/image.jpg');
          background-size: cover;
          height: 100vh;
        }
      `}</style>
    </>
  );
}

export default Home;

4. CSS-in-JS Libraries (e.g., styled-components or emotion)

If you are using CSS-in-JS libraries such as styled-components or emotion in your project, set the background image as follows:

jsx
// Using styled-components
import styled from 'styled-components';

const Background = styled.div`\n  background-image: url('/path/to/your/image.jpg');\n  background-size: cover;\n  height: 100vh;\n`;

function Home() {
  return <Background>{/* Content */}</Background>;
}

export default Home;

When using background images, ensure you have the right to use the image and that the image path is correct. For images in the public folder, omit public in the path and reference it from the root path. Remember to adjust background image properties such as background-size, background-repeat, and background-position to achieve your desired layout.