How to import images into CSS Modules?

Question

I'm creating a website(creating using React). so I want to add a full-screen image for the Home page. I'm using CSS module. when importing an image into the module.css it's not rendered. How can I fix this. Here is my code. I'm importing this (scr => assets folder)

codesandbox-link

Home.js

import React from 'react'
import styles from '../styles/Home.module.css'
 
const Home = () => {
    
    return (
        <div className={styles.Hero} ></div>       
                             
        
    )
}

export default Home

Home.module.css

.Hero {
  background-image: url(../assets/hero.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Hello @AjeetShah here is codesandbox link codesandbox.io/s/stupefied-burnell-ndkzj?file=/src/… — kdam
– kdam, Commented Mar 17, 2021 at 4:12
Look at the code in the browser, what's the class name of the div? Should it be Hero, instead? — Adriano
– Adriano, Commented Mar 17, 2021 at 4:32
I request you to go through this question to get better insight stackoverflow.com/questions/39195687/… — saurav
– saurav, Commented Mar 17, 2021 at 5:10

Ajeet Shah · Accepted Answer · 2021-03-17 06:00:30Z

It is CSS issue, your div, which is supposed to show the image in the background, has no height and width:

Background image is loading perfectly after adding below styles:

Global CSS (styles.css):

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

App.module.css:

.Hero {
  background-image: url(./assets/hero.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
}

and in App.js:

import styles from "./App.module.css";

export default function App() {
  return (
    <div style={{ width: "100%", height: "100%" }}>
      <div className={styles.Hero}></div>
    </div>
  );
}

I am not good at CSS. So, this may not be the perfect way to handle stylings (height / width). So, you may improve it. Here is the full code*.

As mentioned in docs, with webpack, you can load images in CSS as:

.Logo {
  background-image: url(./logo.png);
}

Webpack finds all relative module references in CSS (they start with ./) and replaces them with the final paths from the compiled bundle.

*I provided full code as the image was not showing in codesandbox, but showing at my local machine.

Anuraag Gupta · Accepted Answer · 2021-03-17 05:00:52Z

1

Try this in a non-sandbox environment. The way you have imported className is fine. I have a feeling sandbox is not reflecting it properly. You can also try -

content:url(<path to image>);

in the className instead of background-image:url

edited Mar 17, 2021 at 5:00

answered Mar 17, 2021 at 4:44

Anuraag Gupta

113 bronze badges

Comments

Bon Pham · Accepted Answer · 2021-03-17 04:55:58Z

0

I used the background in color and succeeded but the image didn't, you can import the image into App.js

 import image from "./url";

 return (
  <img src={image} alt="" />
 )

answered Mar 17, 2021 at 4:55

Bon Pham

234 bronze badges

Collectives™ on Stack Overflow

How to import images into CSS Modules?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related