To stretch and scale CSS background, we set the background-size property.
For instance, we write
#my_container {
background-size: 100% auto;
}
to set the background-size property to 100% auto; to stretch and scale the border to fill the element.
To force child div to be 100% of parent div’s height without specifying parent’s height with CSS, we use flexbox.
For instance, we write
.parent {
display: flex;
flex-direction: row;
}
.child {
align-self: center;
}
to make the element with class parent a flex container with display: flex;.
And then the children element should fill the parent’s height by default.
To make a div vertically scrollable using CSS, we set the overflow-y property.
For instance, we write
<div style="overflow-y: scroll; height: 400px">...</div>
to make the div scrollable vertically with overflow-y: scroll;.
We’ve to set the div’s height for overflow-y to work.
To fix image inside div has extra space below the image with CSS, we make the image a block element.
For instance, we write
img {
display: block;
}
to make the image a block element with display: block; to remove the space below the image.
To position absolute but relative to parent with CSS, we set the position property.
For instance, we write
#father {
position: relative;
}
#son1 {
position: absolute;
top: 100%;
}
to set the parent element to have relative position with position: relative;.
Then we set the child to have absolute position with position: absolute;, which will position it relative to the parent.