Why divs with backgrounds aren't displayed as one below other? - html

Question

I'm stucked. I've tried different solutions but it doesn;t work for me - I do something wrong.
I want to get 2 divs (there is more, but it should be enough to solve the problem): header and menu. Both of them have got background-images. I want to set 'menu' directly below 'header' using responsive approach.
<div id="header_main"></div>
<div id="menu"></div>
i CSS:
#header_main{
background-image: url(../images/headerPapyrus.png);
background-size: 100%;
background-repeat: no-repeat:
margin: 0;
padding: 0;
width:100%;
height: auto;
position: absolute;
}
#menu{
background-image: url(../images/bgMenu.png);
background-size: 100%;
background-repeat: no-repeat:
margin: 0;
padding: 0;
width:100%;
height: auto;
position: absolute;
}
I want to get divwith dimensions in line with its background images widht and height, but responsive. Please give me any adice how I can do it properly.

Answer 1

Right now two images appear on top of each other, that's why you would only be able to see one of them.
Try to wrap them in a seperate div and give display:flex to that div. This way you could achieve what you want I guess.

Answer 2

Change your position on the header to position: relative; and set both of them to display: flex;
Like this:
#header_main{
background-image: url(../images/headerPapyrus.png);
background-size: 100%;
background-repeat: no-repeat:
margin: 0;
padding: 0;
width:100%;
height: auto;
position: relative;
display: flex;
}
#menu{
background-image: url(../images/bgMenu.png);
background-size: 100%;
background-repeat: no-repeat:
margin: 0;
padding: 0;
width:100%;
height: auto;
position: absolute;
display: flex;
}
<div id="header_main">header</div>
<div id="menu">menu</div>

Answer 3

These are specific methods for creating responsive background:
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
And why do you give the elements position absolute and take them out of the normal flow? You can use maybe :
#header_main{
position: relative;
};
#menu{
position: absolute;
top:0;
left:0;
};