0

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>
2
  • 1
    In the code you posted, the background-color is NOT white. If you add a black background to body or whatever wrapper, the nav / ul is displayed with white text on black background. (If you don't add anything, you don't see anything, since everything is white)
    – Johannes
    Feb 29, 2020 at 0:21
  • If I'm correct in interpreting your question you actually want the 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.
    – Sydney Y
    Feb 29, 2020 at 1:18

2 Answers 2

2

Can you clarify your issue? When I open your code my background is white but if I change the body elements background to red then the page turns red.

For example this is what I see when body is purple. I don't have the image file so that's why the white line is there. enter image description here

Also why is your H1 element in the Head? It should be in the body

  <body>
    <h1 class="title">PARALLEX</h1>
    <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>
0

Your image is not behind the ul because in the HTML the image comes after the ul so without further instruction the image renders after the list.

Add a left and top value to place your image in the top corner:

.main.img {
  height: 100vh; // "viewport height" seems more appropriate than % in this case
  width:100vw;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1; // negative puts it behind anything with the default value, so you don't need to define the z-index of every single element
}

ul does not have a background by default, so you can remove that block of css: *{...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.