Background images

I have two background images in my parent div . I am unable to decrease the gap between the card images also i want to know it is the best practice to have this kind of design as in the attaced image.live website link""https://talhamustafa1.github.io/Intractive-card/"
7 Replies
croganm
croganm16mo ago
Just set a gap on the parent div
.container-fluid .col-md-4 {
background-image: url("../images/bg-main-desktop.png");
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
gap: 6rem;
}
.container-fluid .col-md-4 {
background-image: url("../images/bg-main-desktop.png");
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
gap: 6rem;
}
However Best way to do something like this is with relative and absolute positioning not background images and flex imo Especially because you'll need it to overflow the div and slightly go in between the gradiant and white backgrounds
Moni
Moni16mo ago
i want to decrease the gap between images
croganm
croganm16mo ago
The images are shrinking because of how your CSS is setup so they can fit within that small background area And when they shrink in width they also have to shrink in height leaving a weird gap
Moni
Moni16mo ago
i think you are right but the issue is as you can see in the picture there is text written on the images do not you think it will be difficult to write text on images while using absolte and reletive positioning
croganm
croganm16mo ago
I don't think so, no. The text will be a child within the cards, absolutely positioned within those cards So no matter how you absolutely position the cards, the text will be absolutely positioned within that
Moni
Moni16mo ago
but the cards will already have position absolute because they are to be placed in center as you mentioned earlier if will give position reletive to cards it will override position absoulte
croganm
croganm16mo ago
You can keep it absolute It will still allow you to position the text
Want results from more Discord servers?
Add your server