stretch the background image to component above - css

Question

I have to components one above the other. I would like to stretch the bg image from the lower one to the upper one. I set the background of the upper one as transparent but I cannot figure out what to do to stretch the image above the component in the second one. I've got
display: block;
background-image: url(${background});
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% -50%;
but the size property is invalid and any positive value doesn't seen to do what I would like it to do. Could you help?

Answer 1

It's hard to know exactly what you are going for without a proper link, but I think you could achieve this by having the second component with a negative margin-top, and equivalent padding-top.
HTML:
<div class="comp-a">
I am the first component
</div>
<div class="comp-b">
I am the second. I control the background!
</div>
CSS:
* {
box-sizing:border-box;
}
.comp-a {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.comp-b {
height: 200px;
padding-top: 100px;
margin-top: -100px;
background: red;
display: flex;
color: white;
align-items: center;
justify-content: center;
}
http://jsfiddle.net/hrsapyqv/