背景图像 (CSS) 不会出现在网站上

Question

I have tried everything but my background image wont show up

the image was in images folder

I have my file linked into CSS

<link rel="stylesheet" href="css/style.css">

Also have the following lines on html

<div id="bgImage" class="bgImageClass">
    
    </div>

Meanwhile in style.css

.bgImageClass {

 background-image: url('../images/background.jpg');

}
#bgImage { 
    position:absolute; width:300px; height:250px;
transition: opacity 0.5s;
}

I hope someone can help

Thank you in advance

Answer 1

Try these CSS styles to show background image.

 .bgImageClass { background-image: url('https://dummyimage.com/16:9x1080'); background-size: cover; background-repeat: no-repeat; background-position: center; position:absolute; width:300px; height:250px; transition: opacity 0.5s; }

 <div id="bgImage" class="bgImageClass"></div>

Answer 2

Mix all of those properties in class selector or id selector as follow:

.bgImageClass { 
         background-image: url('../../image/background.jpg'); 
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position:absolute; 
width:300px; 
height:250px; 
transition: opacity 0.5s; 
   }