Can't see canvas under any block elements

Question

So, I have a JS canvas that generates my BG and a Nav bar over, but the problem is that any box that I place appears over the background. I want the circles to be seen at all times, even under the Nav. In simple english - I want to make all box backgrounds transparent. I hope the problem is clear enough.

Code:

HTML:

<html>
<head>
  <meta charset="utf-8">
  <title>Sky</title>
  <!-- Styles -->
  <link href="css/style.css" rel="stylesheet" type="text/css"/>
  <link href="css/header.css" rel="stylesheet" type="text/css"/>
  <link href="css/content.css" rel="stylesheet" type="text/css"/>
  <link href="css/footer.css" rel="stylesheet" type="text/css"/>
  <!-- P5 Libraries -->
  <script language="javascript" type="text/javascript" src="libs/p5.js"></script>
  <script language="javascript" src="libs/p5.dom.js"></script>
  <!-- Sky BG -->
  <script language="javascript" type="text/javascript" src="js/sketch.js"></script>
  <script language="javascript" type="text/javascript" src="js/star.js"></script>


</head>

<body>
  <div id="mainWrap">
    <header>
      <div id="logoDiv">

      </div>
      <nav id="mainNav">
        <ul>
          <li><a href="">HOME</a></li>
          <li><a href="">ABOUT</a></li>
          <li><a href="">HELP</a></li>
          <li><a href="">CONTACT</a></li>
        </ul>
      </nav>

    </header>
  </div>
</body>


</html>

CSS:

html, body, #mainWrap {
  height:100%;
  width:100%;
  margin:0px;
}
body{
  color: rgba(255,255,255,0.9);
  background-color: #222222;
}
a {
  text-decoration: none;
  color: rgba(255,255,255,0.3);

}
ul {
  list-style-type:none;
}

CSS Header:

#mainNav ul, #mainNav ul li {
  margin: 0px;
  padding: 0px;
}
#mainNav{
  text-align: center;
  width: 100%;
  height: 40px;
  margin: 30px auto;
  background-color: rgba(255, 0, 0, 0.0);
}
#mainNav ul li{
  display: inline-block;
  width: 20%;
  height: 100%;
  text-align: center;
}
#mainNav ul li a {
  display: inline-block;
  vertical-align: middle;
  transition: 0.5s ease-in-out;
  width: 100%;
  height:40px;
  padding: 20px 0;
}
#mainNav ul li a:hover {
  color: rgba(255,255,255,0.9);
  background-color: rgba(255,255,255,0.3);
}
#logoDiv {
  width: 100%;
  height: 100px;
  opacity: 0;
}

The relevant js :

function setup() {
  //full screen setup
  canvas = createCanvas(window.innerWidth*1.4,window.innerHeight*1.4);
  canStyle = canvas.style;
  canvas.elt.style.position = "fixed";
  mainWrap = document.getElementById('mainWrap');
  canvas.parent(mainWrap);

Opacity:0; or/and filter: alpha(opacity = 0); results in this... the box elements are white not transparent.

Snippet

Possible duplicate of [How to make the background DIV only transparent using CSS](http://stackoverflow.com/questions/7565384/how-to-make-the-background-div-only-transparent-using-css) — Spencer Wieczorek, Dec 19 '16 at 20:38
You might want to show us a working snippet, because this css seems fine to me. — Randy, Dec 19 '16 at 20:57
but the website you've linked to is working properly, or am i missing something? — Brian H., Dec 20 '16 at 16:19
@Brian the problem i am trying to solve is - I want all html elements to have a transparent background, so i can see my Background even when there is content over it. — Austris Otersons-Andersons, Dec 20 '16 at 16:37
the thing is, i see the background and the ul with it's "hey" li elements just fine. — Brian H., Dec 21 '16 at 08:51

score 0 · Answer 1 · answered Dec 20 '16 at 17:07

0

I got the solution. First i moved the elements out of mainWrap, so they come after the Canvas. Then I set the position of the elements to absoloute and placed them. After rgba worked fine for making the background transparent :)

answered Dec 20 '16 at 17:07

Austris Otersons-Andersons

25
1
7

score -1 · Answer 2 · answered Dec 19 '16 at 21:04

-1

Maybe try something along the lines of filter: alpha(opacity = 0); in #mainNav and remove the background-color: rgba(255, 0, 0, 0.0); maybe? I'm not sure, don't have time to test it out but that's my guess.

answered Dec 19 '16 at 21:04

a.anev

125
1
4
11

wow this syntax isnt't it some <=IE8 only weird function ? It's been a long time :-) Thanks for nostalgia. But OP said he uses canvas only supported in html5 browsers. So opacity:value should do, but will also make the texts transparents and any way just not setting the background of the divs should do too or if he can't cleanup its CSS background-color: transparent. – Kaiido Dec 19 '16 at 23:32

Can't see canvas under any block elements

2 Answers2