How can I position a content element in front of an image?

Question

I am trying to build following site.

enter image description here

I cant figure out how I can make the flexbox in the center of the Image. What am I doing wrong?

.background {
    max-height: 700px;
    max-width: 1200px;
    margin: auto;
}
.container {
    display: flex;
    flex-direction: column;
    background-color: black;
    width: 1200px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

    <div class="background">
        <img src="../FlexBox Project/Pictures/img-mission-background.jpg">
        <div class="container">
            <div class="header">
                <h2>Our Mission</h2>
            </div>
        </div>
    </div>

Your image shouldn't an element. It should be a background. It can be done as an image, but it's much more difficult. — isherwood, Mar 11 '22 at 16:39
See https://developer.mozilla.org/en-US/docs/Web/CSS/background-image. — isherwood, Mar 11 '22 at 16:42
Yeah i tried using it as a background-image before aswell but also wasnt able to make it centered above the image unfortunatly. Thanks though. — LoneMeloen, Mar 11 '22 at 16:51
See also https://css-tricks.com/snippets/css/a-guide-to-flexbox. — isherwood, Mar 11 '22 at 17:20

score 0 · Answer 1 · edited Mar 11 '22 at 16:41

0

Maybe it will work with following code:

.header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.background {
    max-height: 700px;
    max-width: 1200px;
    margin: auto;
}
.container {
    display: flex;
    flex-direction: column;
    background-color: black;
    width: 1200px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

<div class="background">
        <img src="https://via.placeholder.com/600">
        <div class="container">
            <div class="header">
                <h2>Our Mission</h2>
            </div>
        </div>
    </div>

edited Mar 11 '22 at 16:41

isherwood

58,414
16
114
157

answered Mar 11 '22 at 16:40

Sven Märki

189
1
12

This doesn't center the content very well. – isherwood Mar 11 '22 at 16:43
1

That helped in bringing the Header above the Image. Its not Centered yet unfortunatly. Also i was hoping i would be able to do it using a flexbox. But the Answer already helped thanks. – LoneMeloen Mar 11 '22 at 16:49

score -1 · Answer 2 · answered Mar 11 '22 at 16:43

-1

Have you tried wrapping the div: class="header" element in a center element?

answered Mar 11 '22 at 16:43

Matthew McCabe

1
1

Please see [answer] and take the [tour]. – isherwood Mar 11 '22 at 16:44

How can I position a content element in front of an image?

2 Answers2