CODEWITHSUNDEEP
htmlcss
MarniD
MarniD

Reputation: 47

css image won't show up

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 class="card">
                   <div class="image"></div>
                   <div class="info"></div>
                  </section>
                 </main>
               </body>

Upvotes: 3

Views: 57

Answers (3)

ChenBr
ChenBr

Reputation: 2612

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%;
}

Upvotes: 2

Kurt
Kurt

Reputation: 734

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

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

Upvotes: 1

Mohamed Drira
Mohamed Drira

Reputation: 52

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

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

Upvotes: 1

Related Questions