I'm working on creating a responsive background image for a room, where I want the wall to take up 2/3 of the vertical height and the carpet area to cover the remaining 1/3.
Here are snippets of the code I've been using - my issue is that I am trying to control the heights of the divs using percentages instead of fixed pixel values.
<style>
#room {
height:100%;
width:100%;
display:block;
}
#wall_bg_1 {
background-image:url(./walls/wall_1.png);
background-repeat:repeat-x;
height:66%;
display:block;
}
#carpet_bg_1 {
background-image:url(.carpets/carpet_1.png);
background-repeat:repeat-x;
height:66%;
display:block;
}
</style>
<body>
<div id="room">
<div id="wall_bg_1"> </div>
<div id="carpet_bg_1"> </div>
</div>
</body>
</html>
Can the heights of the divs be controlled in percentages? Thank you for your assistance!