How to stretch background image to container width but retain original height?
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
I’m trying to put a background-image that should repeat vertically and stretch horizontally, but keep its height as original svg.
I’ve tried to fix the background-size: 100% 33px; but the orignal height is not retained.
Height should be the same in all .child and it should be stretched to its parent container.
Below are my try
background-size: 100% 33px; // TO FIX SIZE
background-repeat: repeat-y; // REPEAT ONLY THROUGH Y
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
border: 5px solid indianred;
}
.parent {
height: 100vh;
background-color: grey;
display: flex;
}
div.child {
background-image: url(“https://assets-marvin.leadsquared.com/smartviews/images/column.svg”);
}
.child:nth-child(1) {
flex: 1;
}
.child:nth-child(2) {
flex: 2;
background-size: 100% 33px;
background-repeat: repeat-y;
}
.child:nth-child(3) {
flex: 3;
background-size: 100%;
}
<div class=”parent”>
<div class=”child”></div>
<div class=”child”></div>
<div class=”child”></div>
</div>
أضف إجابة