Tea Cosy project and unresponsive div background img

Get Help CSS
,
#1

Hi
I am currently completing Tea Cosy project and stumbled on problem with background img of my div. The img will not resize when reducing screen .
I have set width and height of the div as that is the only way img will appear.
When i attempt to change width and height to max values or more dynamic measures the img disappears completely .
Please some advice on where I’m going wrong and how to create div with responsive background img.

<div class="mission">
        <div class="mission-statement">
            <h2> Our Mission</h2>
            <h4>Handpickt, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </div>

CSS

.mission {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 1200px;
    height: 700px;
    background-image: url(img-mission-background.jpg);
  
  }

mission-statement{
display: flex;
flex-direction: column;
flex-shrink: 1;
background-color: black;
max-height: fit-content;
width:100%;
text-align: center;

}
#2

Hi, when you work with flexbox, the parent container must be given a height if you want it to be greater than the sum of the size of all its child containers or another serious option with padding top and bottom.
As for the background, that’s fine the way you did it, just add the value background-size: cover to make the image fit the width of the screen.
I hope this information helps you. :smile:

#3

thank you. background-size property did help with resizing the pic when screen is reduced :+1:

1 Like