Displaying <img> underneath other elements-CodePudding

:root {
    --clr-primary: #0F052F;
    --clr-secondary: #43D9B8;
    --clr-light: #EEEEEE;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;
}

* {
    margin: 0;
    box-sizing: border-box;
    background-color: #FFFFFF;
}

body {
    font-family: 'Poppins', sans-serif;
}

.wrapper { 
    width: 1440px;
    margin: 0 auto;
    padding: 0 100px;

}

/* Header - Navigation */

.desktop-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1240px;
    position: fixed;
    z-index: 200;
    top: 44px;
    padding-right: 0;
}

.desktop-nav .menu-items {
    display: flex;
    list-style: none;
}

.desktop-nav .menu-items li {
    margin: 0 27.5px;
}

.desktop-nav .menu-items li:nth-last-of-type(1) {
    margin-right: 0;
}

.desktop-nav .menu-items li a {
    text-decoration: none;
    color: var(--clr-primary);
    font-size: 16px;
    font-weight: var(--fw-medium);
    position: relative;
}

.desktop-nav .menu-items li a.active::after {
    content: "";
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: var(--clr-secondary);
    left: 0;
    bottom: -2px;

}

.desktop-nav .menu-items li a.btn {
    color: white;
    background-color: var(--clr-primary);
    border-radius: 10px;
    padding: 10px 23px;
}

/* BIA section */

.bia-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bia-container .left h1 {
    font-size: 80px;
    font-weight: var(--fw-bold);
    margin: 60px 190px 18px 105px;
}

.bia-container .left p {
    font-size: 18px;
    font-weight: var(--fw-regular);
    margin: 18px 195px 57px 105px;
}

.bia-container .left a.btn {
    text-decoration: none;
    color: rgb(0, 0, 0);
    border-radius: 10px;
    padding: 10px 23px;
    border: 1px solid #43D9B8;
    margin: 0 0 0 105px;
    
}

.bia-container .right {
    padding-right: 105px;
}

/* Background header */

.bia-bg {
    position: absolute;
    z-index: -1;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Google Fonts-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div >
        <nav >
            <div >
                <a href="#">
                    <img src="Images/bia-logo.svg" alt="">
            </div>

            <ul >
                <li>
                    <a href="#" >Home</a>
                </li>

                <li>
                    <a href="#">Services</a>
                </li>

                <li>
                    <a href="#">Contact</a>
                </li>

                <li>
                    <a href="#" >Neem contact op</a>
                </li>
            </ul>
        </nav>

        <!-- End of desktop navigation -->

        <header >
            <div >
                <h1>Make data work for you</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut neque faucibus gravida viverra
                    tristique. Morbi quis commodo interdum id risus. Vitae hac viverra dui quis lobortis parturient
                    purus. Libero pharetra tortor.</p>
                <a href="#" >Neem contact op header</a>
            </div>

            <div >
                <img src="Images/header-analytics.svg" alt="">
            </div>

            <img  src="Images/header-background.svg" alt="">

            <!-- End of header section -->
        </header>
    </div>

    <script src="main.js"></script>
</body>

</html>

I have a problem. I have a background image that I want to display, however when I give the image a z-index of -1, it becomes invisible and isn't displayed in the background. Does anyone have an idea why this might be happening?

<div >
    <img src="Images/header-analytics.svg" alt="">
</div>

.bia-bg {
    position: absolute;
    z-index: -1;
}

The class and image I'm talking about is found on line 56 (HTML) and the class and image is on line 117 (CSS).

For your reference, the code can be found here: JSFiddle.

Any help would be much appreciated!

What it's supposed to look like:

Design

CodePudding user response：

To put a background on a div or other element you only need to use this on CSS:

background-image: url("./your_image.png");

Getting like this
html

<div >
    <!-- something -->
</div>

css

.bg_img{
    background-image: url("Images/header-analytics.svg");
}

CodePudding user response：

You have given absolutely everything a default white background.

This means that something with z index -1 cannot be seen at all because elements with default 0 z index cover it in white.

Try removing that blanket setting.