Kevin Powell - Community•2y ago

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•2y 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

MoniOP•2y ago

i want to decrease the gap between images

croganm•2y 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

MoniOP•2y 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•2y 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

MoniOP•2y 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•2y ago

You can keep it absolute It will still allow you to position the text

Gaming

Programming

Background images