1. 움직이지 않는 backround 만들기, feat. 그라데이션

이전   Nextjs 프로젝트에서, 백그라운드로, 그림을 사용해 보았다.

 

어? 근데, 백그라운드가, 블록만 하나씩 생기면 움직인다. 접히고, 짤리고,

 

그 이유는 body 에, backround-image 를 넣었기 때문

 

에라이

 

그래서 새로 작업중인, React 사이드프로젝트에는,

움직이지 않는 딱 고정된 백그라운드를 만들어볼것이다!

 

 

<프로세스>

 

1. main-backround 파일을 만든다.

2. 스타일링 한다.

3. index.js 에 가서, 붙여넣는다.

4. z-index 를 0로 설정해 가장 후방으로 뺀다.

 

 

<main-background.js>

        import styles from "./main-background.module.css";

        function MainBackround() {
          return <div className={styles.main_background}></div>;
        }
        export default MainBackround;

<main-background.module.css>

        .main_background {
        
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            to left,
            rgba(255, 0, 0, 0.426),
            rgba(255, 166, 0, 0.525)
          );
          z-index: -1;
          
        }

<index.js>

        import React from "react";
				...
        import MainBackround from "./components/ui/main-backround/main-background";

        const root = ReactDOM.createRoot(document.getElementById("root"));
        root.render(
          <Layout>
            <MainBackround />
            <App />
          </Layout>
        );

결과

 

 

*********   2022. 12. 22 추가 수정사항      *******

 

   position 을 fixed 로 수정하자.     

 

그렇게하면, 화면이 마음대로 늘어나도, 백그라운드도 같이 늘어나,

화면이 예쁘게 커버된다.

 

<main-background.js>

        import styles from "./main-background.module.css";

        function MainBackround() {
          return <div className={styles.main_background}></div>;
        }
        export default MainBackround;

<main-background.module.css>

        .main_background {
        
          position: fixed;		// absoulute 아니고, fixed
          top: 0;
          left: 0;
          width: 100%;