css - Responsive containers with shapes

Question

I am trying to create this layout: LINK

I need to create 3 containers and each container will have an image as a background. Tried to do it with SVG, but it's not an option, because in future images will be changed via CMS, so I need a shape, that images can fill in. Also tried to play with the border, so I can create a shape, but it's also not working the way it looks on the image above. Is there an easier way to achieve this? Let's say using bootstrap classes?

Answer 1

You can do it in two ways 1)using bootstrap classes 2)using @media and for showing proper image according to div size you can use .className{background-size:contain;background-repeat:no-repeat}