css background image is not displaying-CodePudding

so far I was trying to display a background image using css however, the image is not showing up on the screen.

this is what I did so far:

import React from 'react';
import './LoginScreen.css';


const LoginScreen = ()=>{
    return (
        <div className="container">
           
        </div>
    )
}


export default LoginScreen;

*,*::before,*::after{
    box-sizing: border-box;
    font-family:Arial, Helvetica, sans-serif;
}


.container {
    background-image: url("../../Images/online_auction.jpg");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

and for my folder structure I have: Images -->online_auction.jpg and Screens -->LoginScreen --->LoginScreen.js LoginSCreen.css

CodePudding user response：

You can check in the browser devtools what the actual problem here is because it can be multiple things. First thing could be that the route is incorrect, if you select the div element in devtools you can hover over the url you provide in the css and it should show you the image if the route is correct. Or you can click on it and if it opens the image in a new tab everything is correct if not you have a wrong path to the image.

Second thing is you don't have any actual content in the div so the element has a width/height of 0px/0px. Since you are setting the image as a background you need to have actual space where that background can appear. I would suggest hardcoding some width and height values until you are sure the image is loading correctly.

CodePudding user response：

Add some content in container section or set height and width property to the container.

CodePudding user response：

you must adjust width class container if want to see background-image in class container, if you want to see background-image your page, you can write in tag body don't write in tag class.

or your address is not found maybe you can change background-image: url(".../Images/online_auction.jpg");