Question 44239 in Html Question posted in
Some basic documentation can be found here.

i want to convert this content to the background – Html

i want this whole page i coded , be part of the <body> with endless height to scroll.

also the loop that i made stay fix when scrolling so i can put my contents on it.

i tried use this contents as a <body> to take a shape like a background but this is not working.

i need a help to make this as a background like background-image but with contents i made.

this is my code

* {
  margin: -18px 0 0 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background: #0c192c;
  background-attachment: fixed;
  height: 5000px;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.bubbles {
  position: relative;
  display: flex;
}

.bubbles span {
  position: relative;
  width: 30px;
  height: 30px;
  background: #4fc3dc;
  margin: 0 4px;
  border-radius: 50%;
  box-shadow: 0 0 0 10px #4fc3dc44, 0 0 50px #4fc3dc, 0 0 100px #4fc3dc;
  animation: animate 15s linear infinite;
  animation-duration: calc(185s/var(--i));
}

.bubbles span:nth-child(even) {
  background: #ff2d75;
  box-shadow: 0 0 0 10px #ff2d7544, 0 0 50px #ff2d75, 0 0 100px #ff2d75;
}

@keyframes animate {
  0% {
    transform: translateY(100vh)scale(0);
  }
  100% {
    transform: translateY(-10vh) scale(1);
  }
}

.blur {
  background-image: url();
  filter: blur(5px);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/css's/rgmsroom.css">
</head>

<body>
  <div class="blur">
    <div class="container">
      <div class="bubbles">
        <span style="--i:11"></span>
        <span style="--i:12"></span>
        <span style="--i:24"></span>
        <span style="--i:10"></span>
        <span style="--i:14"></span>
        <span style="--i:23"></span>
        <span style="--i:18"></span>
        <span style="--i:16"></span>
        <span style="--i:15"></span>
        <span style="--i:13"></span>
        <span style="--i:26"></span>
        <span style="--i:17"></span>
        <span style="--i:13"></span>
        <span style="--i:28"></span>
        <span style="--i:14"></span>
        <span style="--i:12"></span>
        <span style="--i:21"></span>
        <span style="--i:10"></span>
        <span style="--i:14"></span>
        <span style="--i:23"></span>
        <span style="--i:15"></span>
        <span style="--i:16"></span>
        <span style="--i:19"></span>
        <span style="--i:29"></span>
        <span style="--i:17"></span>
        <span style="--i:13"></span>
        <span style="--i:28"></span>
        <span style="--i:17"></span>
        <span style="--i:13"></span>
        <span style="--i:26"></span>
        <span style="--i:13"></span>
        <span style="--i:11"></span>
        <span style="--i:24"></span>
      </div>
    </div>
  </div>
</body>

</html>
Tags:

2

Answers


  1. 0

    Try to make whole body with some random named class and after that edit that class in style segment where you will edit that background and url to that picture that u want to see as background needs to be added where class is started after "".

    Login or Signup to reply.
  2. 0

    You could stick it with sticky or else position and set the content inside another container on top of it.

    idea:

    * {
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background: #0c192c;
  color: white;
}

.content {
  position: relative;
  z-index: 1;
  color: white;
  font-size: 5em;
  display: grid;
  grid-auto-row: 1fr;
  height: 5000px;
}

.blur {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
}

.container {
  height: 100vh;
  overflow: hidden;
}

.bubbles {
  width: 100%;
  display: flex;
}

.bubbles span {
  position: relative;
  width: 30px;
  height: 30px;
  background: #4fc3dc;
  margin: 0 4px;
  border-radius: 50%;
  box-shadow: 0 0 0 10px #4fc3dc44, 0 0 50px #4fc3dc, 0 0 100px #4fc3dc;
  animation: animate 15s linear infinite;
  animation-duration: calc(185s/var(--i));
}

.bubbles span:nth-child(even) {
  background: #ff2d75;
  box-shadow: 0 0 0 10px #ff2d7544, 0 0 50px #ff2d75, 0 0 100px #ff2d75;
}

@keyframes animate {
  0% {
    transform: translateY(100vh)scale(0);
  }
  100% {
    transform: translateY(-10vh) scale(1);
  }
}

.blur {
  background-image: url();
  filter: blur(5px);
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/css's/rgmsroom.css">
</head>

<body>
  <div class="blur">
    <div class="container">
      <div class="bubbles">
        <span style="--i:11"></span>
        <span style="--i:12"></span>
        <span style="--i:24"></span>
        <span style="--i:10"></span>
        <span style="--i:14"></span>
        <span style="--i:23"></span>
        <span style="--i:18"></span>
        <span style="--i:16"></span>
        <span style="--i:15"></span>
        <span style="--i:13"></span>
        <span style="--i:26"></span>
        <span style="--i:17"></span>
        <span style="--i:13"></span>
        <span style="--i:28"></span>
        <span style="--i:14"></span>
        <span style="--i:12"></span>
        <span style="--i:21"></span>
        <span style="--i:10"></span>
        <span style="--i:14"></span>
        <span style="--i:23"></span>
        <span style="--i:15"></span>
        <span style="--i:16"></span>
        <span style="--i:19"></span>
        <span style="--i:29"></span>
        <span style="--i:17"></span>
        <span style="--i:13"></span>
        <span style="--i:28"></span>
        <span style="--i:17"></span>
        <span style="--i:13"></span>
        <span style="--i:26"></span>
        <span style="--i:13"></span>
        <span style="--i:11"></span>
        <span style="--i:24"></span>
      </div>
    </div>
  </div>

  <div class="content">
    <p>hello</p>
    <p>the</p>
    <p>world</p>
  </div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search