how to use background-size to fill whole div without breaking with background-image?

Weverton 0
Viewed 31

At normal resolutions it doesn't break:

enter image description here

Now in smaller resolution breaks:

enter image description here

My css code:

tfoot {
    display: grid;
    grid-column: 1 / -1;
    max-width: 100%;
    justify-content: right;
    background-image: url(https://dv.bamboostock.net/wp-content/uploads/2022/09/GABRIEL_png.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    margin-top: 130px;
    place-items: right;
}

My css code in breakpoint:

@media (min-width: 900px) and (max-width: 912px) {

tfoot {
    max-width: 100% !important;
    background-size: contain;
    margin-top: 80px;
    justify-items: end;
}

}

css html
1 Answers

Build the background using gradients and you won't have such issue:

.box {
  height: 300px;
  border:2px solid red;
  background:
   linear-gradient(#fff 50%,#0000 0),
   radial-gradient(circle closest-side,#0000 69%,#000 71%) 50%/40px 100%;
}
<div class="box"></div>

Temani Afif0
Related