Flexbox height and background image height

Question

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 class="map-container">
  <div class="flexbox-point flexbox-point1"></div>
  <div class="flexbox-point flexbox-point2"></div>
  <div class="flexbox-point flexbox-point3"></div>
</div>

Kameron · Accepted Answer · 2021-12-19T22:04:04.010

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 class="map-container">
   
        <div class="flexbox-point flexbox-point1"></div>
        <div class="flexbox-point flexbox-point2"></div>
        <div class="flexbox-point flexbox-point3"></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 class="container">
<div class="map-container">
   <div class="flexbox-point flexbox-point1"></div>
   <div class="flexbox-point flexbox-point2"></div>
   <div class="flexbox-point flexbox-point3"></div>
</div>
</div>

Hi, and thanks Super duper Do you know how to set the height of parent container to the same height as the the background image, and still make it responsive? — Amy K, Dec 19 '21 at 21:55
A beginner at everything Sorry, did not scroll down far enough to see the entire code you sent with the
Oh, thank you very much, now I get the whole background image in the container. I am so happy right now. — Amy K, Dec 19 '21 at 22:25

Flexbox height and background image height

1 Answers1