Menu
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>
216
asked Jan 29 '26 17:01
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%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With