I've tried this, but I still see a white background on the ul
*{
background-color: transparent;
background-image: none;
}
CODE:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel ="stylesheet" type="text/css" href="style.css"
<meta charset="utf-8">
<h1 class="title">PARALLEX</h1>
<style>.main.img {
height: 100%;
width: 100%;
position:absolute;
z-index: 1;
}
.title{
color: white;
width: 100%;
font-size: 450%;
font-family: sans-serif;
margin-top: 12.5%;
position: absolute;
z-index: 2;
letter-spacing: 1.25em;
text-align: center;
text-indent: 1.25em;
}
li, a, button {
font-family: sans-serif;
font-weight: 500;
font-size: 16px;
color: white;
text-decoration: none;
}
*{
background-color: transparent;
background-image: none;
}
nav {
order: 1;
}
.nav_links {
list-style: none;
margin: 0;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0s;
}
.nav_links li a:hover {
color: #0088a9;
}
body {
margin:0;
}
</style>
</head>
<body>
<nav>
<ul class="nav_links">
<li><a href="#">HOME</a></li>
<li><a href="#">SHOP</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
</ul>
</nav>
<div>
<img class="main img" src="mountains.jpg">
</div>
</body>
</html>
body
or whatever wrapper, thenav
/ul
is displayed with white text on black background. (If you don't add anything, you don't see anything, since everything is white)ul
to be on top of image you are trying to make into a background image? Maybe update your wording to reflect that, because everyone is thinking you want no background.