I have two divs that I want to position side-by-side. One contains an image, one contains text.
Because the height of the text div will change depending on the width of the browser, I would like to use flexbox and background-size: cover to ensure the image is always the same height as the text div next to it.
I have managed to successfully do this in Chrome, Safari and Firefox in the following manner:
.flexbox-container {
display: -ms-flex;
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.your-perfect-colours .content .image{
background-image: url(/images/your-perfect-colours.jpg);
background-size: cover;
width: 62%;
}
.your-perfect-colours .text{
order: 1;
width: 38%;
}<div class="your-perfect-colours">
<div class="content flexbox-container">
<div class="text">
<h2>Your Perfect Colours</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula orci, varius in vulputate eu, lobortis a magna. Nunc a lectus ipsum. In hac habitasse platea dictumst. Donec pulvinar velit purus, vel consectetur risus laoreet a. Aliquam erat volutpat. Morbi quis efficitur arcu, et pharetra massa. Nullam sed diam purus.</p>
<button>Find out more</button>
</div>
<div class="image">
</div>
</div>
</div>This results in the following in the browser:
When the browser is resized, the image correctly adjusts its position to cover the size of the div.
However, I have used Browserstack to show me a screenshot from Internet Explorer and it's not loading the image:
Am I missing something obvious or is this an IE quirk? The fact this works in three other browsers seems to point the finger at IE, but I'd like to get some input on this to see if I can get this working.
Thanks.