0
[![insert the image description here][1][1]Gentlemen(as), I am trying to position an image to the background of my project, but when using the cover the same cuts the bottom, and when I use any other form it replicates the image and 4 squares, as attached below, could give me a light on how to adjust this problem ?
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.jumbo {
background-image: url(../Images/metaVendedores.png");
background-size: cover;
}
.container {
width: 90%;
margin: 0 auto;
box-sizing: border-box;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding-top: 1rem;
}
.box {
width: calc(50% - 2rem);
height: 2rem;
margin: 1.5em 1em;
box-sizing: border-box;
border: 1px solid black;
display: flex;
}
.p1, .p2, .p3 {
display: flex;
align-items: center;
justify-content: center;
color: red;
font-family: sans-serif;
font-weight: bold;
background-color: #ffffff;
}
.p1 {
flex-grow: 3;
}
.p2 {
flex-grow: 2;
background-color: red;
color: #fff;
position: relative;
}
.p3 {
flex-grow: 1;
}
.p2::after {
content: "texto";
width: 100%;
height: 1.5em;
position: absolute;
top: -1.5em;
left: 0;
background-color: red;
line-height: 1.5em;
text-align: center;
box-shadow: inset 0 0 0.2em rgba(0, 0, 0, 0.5);
}<div class="jumbo">
<div class="container">
<div class="box">
<div class="p1">
<c:out value="${VN1.rows[0].FUNCIONARIO}" />
</div>
<div class="p2">
<fmt:formatNumber value="${VN1.rows[0].META}" type="currency" />
</div>
<div class="p3">
<c:out value="${VN1.rows[0].ACUMULADO}" />%
</div>
</div>
<div class="box">
<div class="p1">
<c:out value="${VN2.rows[0].FUNCIONARIO}" />
</div>
<div class="p2">
<fmt:formatNumber value="${VN2.rows[0].META}" type="currency" />
</div>
<div class="p3">
<c:out value="${VN2.rows[0].ACUMULADO}" />%
</div>
</div>
<div class="box">
<div class="p1">
<c:out value="${VN3.rows[0].FUNCIONARIO}" />
</div>
<div class="p2">
<fmt:formatNumber value="${VN3.rows[0].META}" type="currency" />
</div>
<div class="p3">
<c:out value="${VN3.rows[0].ACUMULADO}" />%
</div>
</div>
<div class="box">
<div class="p1">
<c:out value="${VN4.rows[0].FUNCIONARIO}" />
</div>
<div class="p2">
<fmt:formatNumber value="${VN4.rows[0].META}" type="currency" />
</div>
<div class="p3">
<c:out value="${VN4.rows[0].ACUMULADO}" />%
</div>
</div>
<div class="box">
<div class="p1">
<c:out value="${VN5.rows[0].FUNCIONARIO}" />
</div>
<div class="p2">
<fmt:formatNumber value="${VN5.rows[0].META}" type="currency" />
</div>
<div class="p3">
<c:out value="${VN5.rows[0].ACUMULADO}" />
</div>
</div>
</div>
</div>[![Cut image[! [][1]][2]][2]][3]
Gabriel on the picture repeat 4x, just vc put background-repeat: no-repeat; that solve. But about embedding the image in the container you have to use the background-size properties, here’s a link uqe will help you understand how it works https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images
– hugocsl
You can also try to adjust as the background-position to get better alignment, the ideal and use together with bg-size in your case. Here is a link to help you tb https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
– hugocsl
@hugocsl, I’ll check those papers, thank you. Referring to the image, even adding the no-repeat, it does not repeat, and is only in one of the squares, as image above that I just added.
– Gabriel Paixão Justino
Here is the documentation on Repeat, make sure you haven’t missed anything in your code: https://developer.mozilla.org/pt-PT/docs/Web/CSS/background-repeat
– hugocsl