I think my background styles is not working properly

user_14721132 0
Viewed 84

I would like the stars divs to be behind the planets divs.

My stars.css is, if I'm right, being pushed next to the chat bot. But I can't seem to figure out why. I already tried to put the position relative, absolute. I already tried to remove the chatbot, but that didn't move the stars background either.

If you click to full page it shows what I have (but normally the planets rotate), and normally it shows it like this:

enter image description here

  /*The CSS below is the CSS for the background*/

html {
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  overflow: hidden;
}

.stars {
  opacity: 1;
  width: 1px;
  height: 1px;
  background: transparent;
  -webkit-box-shadow: /*A big shadow*/;
  -webkit-animation: animStar 250s linear infinite;
  animation: animStar 250s linear infinite;
  mix-blend-mode: screen;
}

.stars:after {
  content: " ";
  top: 6000px;
  width: 1px;
  height: 1px;
  background: transparent;
  -webkit-box-shadow: /*Again lots of shadows*/;
  mix-blend-mode: screen;
}

.stars3 {
  opacity: 1;
  width: 3px;
  height: 3px;
  background: transparent;
  -webkit-box-shadow: /*Lots of shadows again*/;
  -webkit-animation: animStar 750s linear infinite;
  animation: animStar 750s linear infinite;
  mix-blend-mode: screen;
}

.stars3:after {
  content: " ";
  position: absolute;
  top: 6000px;
  width: 3px;
  height: 3px;
  background: transparent;
  -webkit-box-shadow: /*Lots of shadows again*/;
  mix-blend-mode: screen;
}

@-webkit-keyframes animStar {
  from {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  to {
    -webkit-transform: translateY(-6000px);
    transform: translateY(-6000px);
  }
}

@keyframes animStar {
  from {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  to {
    -webkit-transform: translateY(-6000px);
    transform: translateY(-6000px);
  }
}


/*All of the CSS below is the CSS for the Chatbot*/

main {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  height: 0;
}

.wrapper-chatbox {
  position: absolute;
  height: 92.75%;
  margin-right: 1vw;
  display: none;
  align-items: flex-end;
  z-index: 999;
}

.chatbot-menu-hidden {
  z-index: 999;
  max-width: 300px;
  width: 6vh;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10000px;
  height: 6vh;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: rgba(9, 10, 15, 0.35) 1px 1px 15px 15px;
}

.chatbot-menu-hidden .opening {
  border: none;
  width: 3vh;
  height: 3vh;
  border-radius: 10000px;
  background-color: #e0e0e0;
}

.chatbot-menu {
  position: absolute;
  z-index: 999;
  display: flex;
  height: 100vh;
  max-height: 0;
}

.wrapper {
  max-width: 300px;
  height: 40vh;
  box-sizing: border-box;
  margin-top: 54vh;
  margin-right: 1vh;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  border-radius: 2.5rem;
  overflow: hidden;
  box-shadow: rgba(9, 10, 15, 0.25) 1px 1px 10px 10px;
}

.close-chatbot {
  display: flex;
  justify-content: flex-end;
  margin-right: 3%;
  margin-top: 3%;
  margin-bottom: 1.5%;
  z-index: 999;
}

.close-chatbot .closing {
  width: 2.6rem;
  height: 2.6rem;
  border: none;
  border-radius: 10000px;
  background-color: #e0e0e0;
}

div#dialogue .bot>button:hover,
.close-chatbot .closing,
#chatbot-menu-hider,
#opening-bubble {
  cursor: url("/Co-Working/img/cursor-homepage-rocket-hover.png"), auto;
}

.close-chatbot .closing:active {
  background-color: #a2a2a2;
}

form {
  flex: 5;
  display: block;
  padding: 15px;
}

.text-box {
  font-size: 16px;
  display: flex;
  width: 100%;
}

input#message {
  font-family: 'Nunito', sans-serif;
  padding-left: 11px;
  padding-right: 9px;
  font-size: 16px;
  height: 27px;
  display: block;
  flex: 10;
  outline: none;
  margin: 0 auto;
  box-sizing: border-box;
  border: none;
  border-radius: 13px;
}

div#dialogue {
  font-family: 'Nunito', sans-serif;
  overflow-x: auto;
  overflow-y: auto;
  display: block;
  flex: 95;
  box-sizing: border-box;
  width: 100%;
  padding: 15px;
  -ms-overflow-style: none;
  /* IE and Edge */
}

div#dialogue::-webkit-scrollbar {
  display: none;
}

div#dialogue .bot>button {
  border: none;
  background-color: rgba(52, 52, 52, 0.85);
  color: #eaeaea;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  padding: 5px;
  margin-top: 4px;
  margin-bottom: 4px;
  border-radius: 1rem;
}

.bot-row,
.user-row {
  padding: 1px 0 10px 0;
  display: block;
}

.user-row {
  text-align: right;
}

.user,
.bot {
  font-size: 16px;
  padding: 5px 8px;
  margin: 1px;
  border-radius: 12px;
  display: inline-block;
}

.bot {
  margin-right: 50px;
  background-color: rgba(255, 255, 255, .85);
  border-bottom-left-radius: 0;
}

.user {
  margin-left: 50px;
  color: white;
  background-color: #3b3;
  border-bottom-right-radius: 0;
}


/*All of the CSS below is for the planets*/

@charset "UTF-8";
body {
  background: radial-gradient(ellipse at bottom, #303a49 0, #151628 100%);
  height: 100%;
  min-height: 100%;
  color: #2f3234;
  overflow: hidden!important
}

.space .solar-syst {
  position: fixed;
  zoom: 150%;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 1;
  color: #fff;
  background-attachment: fixed;
  opacity: 1;
}

.space .solar-syst div {
  border-radius: 1000px;
  top: 50%;
  left: 50%;
  position: absolute;
  z-index: 9;
}

.space .solar-syst div:not(.sun) {
  border: 1px solid rgba(102, 166, 229, .12)
}

.space .solar-syst div:not(.sun):before {
  left: 50%;
  border-radius: 100px;
  content: "";
  position: absolute
}

.space .solar-syst div:not(.asteroids-belt):before {
  box-shadow: inset 0 6px 0 -2px rgba(0, 0, 0, .25)
}

.space .sun {
  background: radial-gradient(ellipse at center, #ffd000 1%, #f9b700 39%, #f9b700 39%, #e06317 100%) -28px -103px;
  height: 40px;
  width: 40px;
  margin-top: -20px;
  margin-left: -20px;
  background-clip: padding-box;
  border: 0!important;
  background-size: 175%;
  box-shadow: 0 0 10px 2px rgba(255, 107, 0, .4), 0 0 22px 11px rgba(255, 203, 0, .13);
  z-index: 999;
}

.space .mercury {
  height: 70px;
  width: 70px;
  margin-top: -35px;
  margin-left: -35px;
  -webkit-animation: orb 7.18673s linear infinite;
  animation: orb 7.18673s linear infinite;
  -webkit-animation-delay: -90s;
  animation-delay: -90s
}

.space .mercury:before {
  height: 4px;
  width: 4px;
  background: #9f5e26;
  margin-top: -2px;
  margin-left: -2px
}

.space .venus {
  height: 100px;
  width: 100px;
  margin-top: -50px;
  margin-left: -50px;
  -webkit-animation: orb 18.45553s linear infinite;
  animation: orb 18.45553s linear infinite;
  -webkit-animation-delay: -90s;
  animation-delay: -90s
}

.space .venus:before {
  height: 8px;
  width: 8px;
  background: #BEB768;
  margin-top: -4px;
  margin-left: -4px
}

.space .earth {
  height: 145px;
  width: 145px;
  margin-top: -72.5px;
  margin-left: -72.5px;
  -webkit-animation: orb 30s linear infinite;
  animation: orb 30s linear infinite;
  -webkit-animation-delay: -90s;
  animation-delay: -90s
}

.space .earth:before {
  height: 6px;
  width: 6px;
  background: #11abe9;
  margin-top: -3px;
  margin-left: -3px
}

.space .earth:after {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 50%;
  top: 0;
  margin-left: -9px;
  margin-top: -9px;
  border-radius: 100px;
  box-shadow: 0 -10px 0 -8px grey;
  -webkit-animation: orb 2.24404s linear infinite;
  animation: orb 2.24404s linear infinite;
  -webkit-animation-delay: -90s;
  animation-delay: -90s
}

.space .mars {
  height: 190px;
  width: 190px;
  margin-top: -95px;
  margin-left: -95px;
  -webkit-animation: orb 56.42613s linear infinite;
  animation: orb 56.42613s linear infinite;
  -webkit-animation-delay: -90s;
  animation-delay: -90s
}

.space .mars:before {
  height: 6px;
  width: 6px;
  background: #cf3921;
  margin-top: -3px;
  margin-left: -3px
}

.space .jupiter {
  height: 340px;
  width: 340px;
  margin-top: -170px;
  margin-left: -170px;
  -webkit-animation: orb 355.72282s linear infinite;
  animation: orb 355.72282s linear infinite;
  -webkit-animation-delay: -90s;
  animation-delay: -90s;
}

.space .jupiter:before {
  height: 18px;
  width: 18px;
  background: #c76e2a;
  margin-top: -9px;
  margin-left: -9px;
}

.space .saturn {
  height: 440px;
  width: 440px;
  margin-top: -220px;
  margin-left: -220px;
  -webkit-animation: orb 882.69525s linear infinite;
  animation: orb 882.69525s linear infinite;
  -webkit-animation-delay: -90s;
  animation-delay: -90s
}

.space .saturn:before {
  height: 12px;
  width: 12px;
  background: #e7c194;
  margin-top: -6px;
  margin-left: -6px
}

.space .saturn:after {
  position: absolute;
  content: "";
  height: 2.34%;
  width: 4.676%;
  left: 50%;
  top: 0;
  -webkit-transform: rotateZ(-52deg);
  transform: rotateZ(-52deg);
  margin-left: -2.3%;
  margin-top: -1.2%;
  border-radius: 50%;
  box-shadow: 0 1px 0 1px #987641, 3px 1px 0 #987641, -3px 1px 0 #987641;
  -webkit-animation: orb 882.69525s linear infinite;
  animation: orb 882.69525s linear infinite;
  -webkit-animation-delay: -90s;
  animation-delay: -90s;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
  -webkit-transform-origin: 52% 60%;
  transform-origin: 52% 60%
}

.space .uranus {
  height: 520px;
  width: 520px;
  margin-top: -260px;
  margin-left: -260px;
  -webkit-animation: orb 2512.4002s linear infinite;
  animation: orb 2512.4002s linear infinite;
  -webkit-animation-delay: -90s;
  animation-delay: -90s
}

.space .uranus:before {
  height: 10px;
  width: 10px;
  background: #b5e3e3;
  margin-top: -5px;
  margin-left: -5px
}

.space .neptune {
  height: 630px;
  width: 630px;
  margin-top: -315px;
  margin-left: -315px;
  -webkit-animation: orb 4911.78386s linear infinite;
  animation: orb 4911.78386s linear infinite;
  -webkit-animation-delay: -90s;
  animation-delay: -90s
}

.space .neptune:before {
  height: 10px;
  width: 10px;
  background: #175e9e;
  margin-top: -5px;
  margin-left: -5px
}

.space .asteroids-belt {
  opacity: .7;
  border-color: transparent!important;
  height: 300px;
  width: 300px;
  margin-top: -150px;
  margin-left: -150px;
  -webkit-animation: orb 179.95583s linear infinite;
  animation: orb 179.95583s linear infinite;
  -webkit-animation-delay: -90s;
  animation-delay: -90s;
  overflow: hidden
}

.space .asteroids-belt:before {
  top: 50%;
  height: 210px;
  width: 210px;
  margin-left: -105px;
  margin-top: -105px;
  background: 0 0;
  border-radius: 140px!important;
  box-shadow:/*A lot of box shadows*/
  .space .pluto {
    height: 780px;
    width: 780px;
    margin-top: -390px;
    margin-left: -390px;
    -webkit-animation: orb 7439.70741s linear infinite;
    animation: orb 7439.70741s linear infinite;
    -webkit-animation-delay: -90s;
    animation-delay: -90s
  }
  .space .pluto:before {
    height: 3px;
    width: 3px;
    background: #fff;
    margin-top: -1.5px;
    margin-left: -1.5px
  }
  @-webkit-keyframes orb {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg)
    }
    to {
      -webkit-transform: rotate(-360deg);
      transform: rotate(-360deg)
    }
  }
  @keyframes orb {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg)
    }
    to {
      -webkit-transform: rotate(-360deg);
      transform: rotate(-360deg)
    }
  }
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--
    <link rel="stylesheet" href="/BackgroundHomepage/stars.css">
    <link rel="stylesheet" href="/BackgroundHomepage/solar.css">

    <link rel="stylesheet" href="/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="/Chatbot/chatbot.css">
    -->
    <title>Homepage</title>
</head>

<body>
    <header>
        <nav>
            <div class="navbar-logo">
                <a href="/Co-Working" class="navbar-option">Home</a>
            </div>
            <div class="navbar-options">
                <a href="/Games" class="navbar-option option-one">Games</a>
                <a href="/Tunes" class="navbar-option option-two">Tunes</a>
                <a href="/Contact" class="navbar-option option-three">Contact</a>
            </div>
        </nav>
    </header>

    <main>
        <div class="space">

            <div class="stars" id="stars"></div>
            <div class="stars3" id="stars2"></div>
            <div class="stars2" id="stars3"></div>
            <div class="solar-syst" id="solar-syst">
                <div class="sun"></div>
                <div class="mercury"></div>
                <div class="venus"></div>
                <div class="earth"></div>
                <div class="mars"></div>
                <div class="jupiter"></div>
                <div class="saturn"></div>
                <div class="uranus"></div>
                <div class="neptune"></div>
                <div class="pluto"></div>
                <div class="asteroids-belt"></div>
            </div>
        </div>

        <script>
        function openForm() {
        document.getElementById("chatbot").style.display = "flex";
        document.getElementById("chatbot-menu-hider").style.display = "none";
        }

        function closeForm() {
        document.getElementById("chatbot").style.display = "none";
        document.getElementById("chatbot-menu-hider").style.display = "flex";
        }
        </script>

        <div class="wrapper-chatbox" id="chatbot-menu-hider">
            <div class="chatbot-menu-hidden">
                <button class="opening" onclick="openForm()" id="opening-bubble">+</button>
            </div>
        </div>
        <div class="chatbot-menu" id="chatbot">
            <div class='wrapper'>
                <div class="close-chatbot">
                    <button class="closing" onclick="closeForm()">-</button>
                </div>

                <div id="dialogue"></div>
                <form onSubmit="return chatbot.sendMessage()">
                    <div class="text-box">
                        <label for="message"></label>
                        <input type="text" name="message" id="message" autocomplete="off" disabled placeholder="Please wait... loading...">
                    </div>
                </form>
            </div>
        </div>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
        <script src="https://unpkg.com/rivescript@latest/dist/rivescript.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/idewcomputing/code-chatbot/src/chatbot.js"></script>
        <!-- 
        <script src="/Chatbot/script.js"></script> 
        -->
    </main>

    <footer>
        <div class="footer-text">
            <p>Co-Working &copy; - Lukas, Nathan, Matti, Loran - Ghent 2021</p>
        </div>
    </footer>
</body>
</html>

css html javascript
1 Answers

First things your css is breaking because of /*Again lots of shadows*/ in your CSS code.

Second, You need to fix your z-index properties. 9 planets and sun and stars, so we suppose we have 11 elements to set the z-index so we can go like// this for z-index

  • stars: 9
  • // Planets z-index goes into two ways you can either hide a small planet behind the big planet
  • // bigger planet will get a bigger z-index so we can use 10, 20 ... 80, 90 for z-index values here.
  • // Or you can follow the planet sequence for overlap
  • // Here you can use ASC order in planet sequence.
  • sun: 100
user_118488950
Related