Flexbox height and background image height-CodePudding

I am a beginner in html and CSS, and I will try to make a map with clickable points, but I do not get it right. I have received a tip of using flexboxes and creating a container with the map as a background image, and creating separate containers that can hold imagebuttons for the clickable points. The solution must be responsive and work for both desktop and mobile.

I have started by trying to get the background image and points/(boxes) to resize equally and then try to set the position on the points/(boxes), but I have encountered a problem already with the background image and the parent container. Because I can not set the height of the parent container to the same height as the background image, so now only half the image is displayed. If I insert the height of the parent container equal to the background image in px, the background image will not resize responsive.

Does anyone know how to set the height of the background image and container to the same, or maybe know a better solution to this?

In that case, I'll be happy to hear from you :-)

My coding so far:

.map-container {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-image: url("Images/home/map_front.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.flexbox-point {
  width: 20%;
  margin: 20px;
  border: 3px solid #B90F12; /* Color to see the points/boxes */
}

.flexbox-point1 {
  min-height: 100px;
}

.flexbox-point2 {
  min-height: 100px;
}

.flexbox-point3 {
  min-height: 100px;
}

<!-- Test for flexbox with map as BG-picture*---->
<div >
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

I would recommend using a fixed width instead of % on your child because the % means it's going to take up 20% of screen width which when resizing the browser could get really small. To center your background image you can use background-position: center; See below.

.map-container{
    display: flex; 
    justify-content: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%; 
    background-image: url("https://dummyimage.com/400x400/000/fff");
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: center;
} 


.flexbox-point{

    width: 400px;
    margin: 20px;
    border: 3px solid #B90F12;    /* Color to see the points/boxes */
} 

.flexbox-point1 {
    min-height: 100px;
} 

.flexbox-point2 {
    min-height: 100px;
} 

.flexbox-point3 {
    min-height: 100px;
}

<div >
   
        <div ></div>
        <div ></div>
        <div ></div>

    
   
</div>

EX with a different height background image.

.map-container{
    display: flex; 
    justify-content: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%; 
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG");
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: center;
} 


.flexbox-point{

    width: 400px;
    margin: 20px;
    border: 3px solid #B90F12;    /* Color to see the points/boxes */
} 

.flexbox-point1 {
    min-height: 100px;
} 

.flexbox-point2 {
    min-height: 100px;
} 

.flexbox-point3 {
    min-height: 100px;
}

.container {
  height: 100vh;
}

<div >
<div >
   <div ></div>
   <div ></div>
   <div ></div>
</div>
</div>