I'm currently working on implementing a fluid image background for one of my webpages. It's functioning perfectly in Chrome, but I can't seem to get it to work in Firefox. The goal is to have two squares with PNG images that resize proportionally when the browser window is resized.
Here is the HTML code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>Test Flex</title>
</head>
<body>
<div id="parent_div">
<div id="bluesquare_div"></div>
<div id="yellowsquare_div"></div>
</div>
</body>
</html>
And here is the CSS code:
body{
background: #444444;
}
#parent_div{
display: flex;
}
#bluesquare_div{
width: 50%;
background: url("bluesquare.png");
height: 0;
background-size: contain;
background-repeat: no-repeat;
padding-top: 50%;
flex-grow: 1;
}
#yellowsquare_div{
width: 50%;
background: url("yellowsquare.png");
height: 0;
background-size: contain;
background-repeat: no-repeat;
padding-top: 50%;
flex-grow: 1;
}
The issue I am facing is that I do not see any output in Firefox. If I remove the display:flex property, then I can view the two squares in Firefox. However, my webpage specifically requires the use of flexbox, so dropping it is not an option.
Does anyone have any insights into why this is not working in Firefox?
Here is the screenshot from Chrome version: 55.0.2883.87 m
https://i.sstatic.net/fBCEB.png
And here is the screenshot from Firefox version: 50.1.0