css background image is not displaying

Question

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

image url's in a stylesheet are relative to the stylesheet ... looks like you only need one .. — Jaromanda X
– Jaromanda X, Commented Aug 24, 2022 at 7:55
CSS ends up as-is in the browser; the path needs to work as part of a URL, it cannot reference the project's file system directly. Move the image into public/Images/ and use "/Images/online_auction.jpg" as url — user5734311
– user5734311, Commented Aug 24, 2022 at 7:59
This is not related to react particularly; try to debug your code on a simple HTML page. Then move it to your react app. You have to define the width and height for your DIV tag (basic knowledge of HTML/CSS is needed to fix this issue) — Kourosh Raoufi
– Kourosh Raoufi, Commented Aug 24, 2022 at 8:02

Ferdous Hasan · Accepted Answer · 2022-08-24 07:57:51Z

1

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

answered Aug 24, 2022 at 7:57

Ferdous Hasan

781 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

GRaykovski · Accepted Answer · 2022-08-24 08:15:54Z

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.

Tyler2P · Accepted Answer · 2022-08-28 14:29:39Z

0

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");

edited Aug 28, 2022 at 14:29

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Aug 24, 2022 at 8:03

Aji Tri H

11 bronze badge

Collectives™ on Stack Overflow

css background image is not displaying

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related