css image won't show up-CodePudding

I want to do a responsive design and it would be easier to add 2 different images in CSS then HTMl, but the image won't show, tried sizes and different styles, moved the image from image folder to the html css folder, nothing works, here is my code:

                * {
                margin: 0;
                box-sizing: border-box;
                  }

                main {
                width: 100vw;
                height: 100vh;
                display: flex;
                flex-direction: column;
                background-color: var(--main-background);
                position: relative;
                 }

               .card {
               display: flex;
               flex-direction: column;
               width: 200px;
               height: 400px;
               background-color: var(--card-background);
               position: absolute;
               top: 50%;
               left: 50%;
               transform: translate(-50%, -50%);
               }

               .image {
               background-image: url(./image-header-mobile.jpg);
               width: 100%;
               }



               <body>
                 <main>
                  <section >
                   <div ></div>
                   <div ></div>
                  </section>
                 </main>
               </body>

CodePudding user response：

Add height: 100%; to your .image CSS.

Because your div is empty, the image isn't shown. Your div doesn't have any height.

.image {
  background-image: url("image.png");
  width: 100%;
  height: 100%;
}

CodePudding user response：

You have to add "" in the start and the end of the picture path Like this :

background-image: url("./image-header-mobile.jpg");

CodePudding user response：

Since you use div, you need to give it width and height.

.image {
  width: 100px;
  height: 100px;
  background-image: url('xxx.png');
}