Place image behind div positioned towards the top center

user_13140889 0
Viewed 34

For a while now I have been trying to figure out how to place an image behind a div that is centered at the top of the div. The image that would be placed behind the div will be an SVG image that in the future I am looking to animate. Currently right now the code I have supplied has a div that is 400 x 400 box and right now I have a place holder image that is right now floating to the left of the div. I am looking to see if anyone can help me out and solve my issue.

I have supplied an image of the intended result I am looking for!

Thanks in advance to everyone!

Image of Intended Result 

body {
 background-color: #f6b93b;
 height: 100%;
 overflow: hidden;
}

#contentContainer {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
}

#productCard {
 height: 400px;
 width: 400px;
 background-color: #FFF;
 border-radius: 25px;
}
<html>

<head>
    <title>Snippet</title>
</head>

<body>
    <div id="contentContainer">
        <div id="imageContainer">
            <img src="https://via.placeholder.com/100">
        </div>
        <div id="productCard">
        </div>
    </div>
</body>

</html>

css html
2 Answers

You were almost there:

#contentContainer {
    margin-top: 60px;
    position: relative;
}

#imageContainer {
    position: absolute;
    top: -50px;
}


body {
 background-color: #f6b93b;
 height: 100%;
 overflow: hidden;
}

#contentContainer {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
  margin-top: 60px;
  position: relative;
}

#imageContainer {
    position: absolute;
    top: -50px;
}

#productCard {
 height: 400px;
 width: 400px;
 background-color: #FFF;
 border-radius: 25px;
}
<html>

<head>
    <title>Snippet</title>
</head>

<body>
    <div id="contentContainer">
        <div id="imageContainer">
            <img src="https://via.placeholder.com/100">
        </div>
        <div id="productCard">
        </div>
    </div>
</body>

</html>

user_8183260

Add a z-index to your image, for example

#productCard {
    height: 400px;
    width: 400px;
    background-color: #FFF;
    border-radius: 25px;
    z-index: 1
}

will put the card ontop of anything that has a lower z-index (by default everything has a z-index of 0),

you can also do z-index: -1 etc...

user_126199310
Related