Displaying <img> underneath other elements
Question
: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 class="wrapper"> <nav class="desktop-nav"> <div class="logo"> <a href="#"> <img src="Images/bia-logo.svg" alt=""> </div> <ul class="menu-items"> <li> <a href="#" class="active">Home</a> </li> <li> <a href="#">Services</a> </li> <li> <a href="#">Contact</a> </li> <li> <a href="#" class="btn">Neem contact op</a> </li> </ul> </nav> <.-- End of desktop navigation --> <header class="bia-container"> <div class="left"> <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="#" class="btn">Neem contact op header</a> </div> <div class="right"> <img src="Images/header-analytics.svg" alt=""> </div> <img class="bia-bg" 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 class="right">
<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:
2 answers
solution1
2 2021-12-26 21:03:23
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 class="bg_img">
<!-- something -->
</div>
css
.bg_img{
background-image: url("Images/header-analytics.svg");
}
solution2
0 2021-12-26 21:46:59
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.