my goal is to transform this text into the background

For my latest project, I want the entire page that I've coded to be integrated into the <body> section with endless scrolling ability.

Additionally, I need the loop that I created to remain fixed when scrolling so that I can easily place my content on it.

I attempted to use these contents as a background for the body, but unfortunately, this approach did not work out as expected.

I require assistance in turning this into a background image, but retaining the content I have generated.

Here is the code snippet:

* {
  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>

htmlcssbackground

Answer №1

Experiment with creating a complete body element using an arbitrary class name, then adjust the styling for that class in the designated segment by changing the background and adding the URL of the image you desire as the background right after the "" delimiter.

Answer №2

You have the option to affix it using the sticky property or the position attribute and place the content within another container on top of it.

Here is an innovative approach:

* {
  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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having Difficulty with Splicing Arrays in React?

Currently working on learning React and trying to develop my own mini-app. I'm basing it very closely on the project showcased in this video tutorial. I've run into an issue with the comment deletion functionality in my app. Despite searching va ...

javascripthtmlcssreactjsbabeljs

Focus on a specific button based on its text inside

Two buttons are present with the same class but different content <a class="button ordrViewBtn">Sold Out</a> <a class="button ordrViewBtn">Re-Sell</a> I want to change the color of the "Sold Out" button. Is it p ...

htmlcssbutton

What is the best way to adjust a Checklist's width to match the width of its parent Dropdown in Dash Plotly?

At the moment, I am facing an issue with setting the width of a checklist from Dash Core Components to match the width of the dropdown menu it is placed in. Here's a glimpse of how it appears currently: https://i.sstatic.net/mjzAd.png Below is the P ...

pythoncssplotly-dashbootstrap-5

Interested in learning how to redirect to a different page using vanilla JavaScript after submitting an HTML form with a Django backend?

Recently delving into Django, I encountered a challenge of linking a js file to my HTML form page and saving the form data before moving on to the next screen. My aim was to incorporate a feature where users can click a picture and POST it along with their ...

javascriptpythonhtmldjangoforms

Discovering a way to capture the space bar event in a number input field with JavaScript

Is there a way to capture space bar input with an onchange event in JavaScript? <html> <head> <script type = "text/javascript"> function lala(aa){ console.log(aa + " dasda"); } </script> </head> <body> <input ty ...

javascripthtml

MUI Grid - justify content to the right

I'm new to utilizing the MUI Grid system and I am currently trying to accomplish a simple task of aligning my 'Cancel' and 'Save' buttons all the way to the right on the screen. Despite browsing through various posts and documentat ...

cssflexboxmaterial-ui

Determining when all textures have successfully loaded in Three.js and ensuring there are no lingering black rectangles

I'm currently developing a web platform that allows users to customize and preview 3D house models. If the user's browser doesn't support WebGL, the server renders the house and sends screenshots to the client. However, if the screenshots ar ...

javascripthtmlcanvasopengl-esthree.js

Tips for including multiple spaces within a cell of a table

I've come across an issue while working on a table and attempting to insert text with multiple spaces. For example, I want to add the text HELLO<1stSPACE><2ndSPACE>WORLD. However, when I enter it as HELLO WORLD, it only displays with a si ...

htmlcsshtml-table

Adjust the background color of a list item using Typescript

At the top of my page, there's a question followed by a list of answers and the option to add new ones. You can see an example in the image below. https://i.stack.imgur.com/NPVh7.jpg The format for each answer is "(username)'s response: at this ...

htmlangulartypescript

Understanding CSS classes in ReactJS Material UI componentsJust wanted to clarify some things

When it comes to styling Material UI components, the recommended approach is to utilize their useStyles function. Here's an example: const useStyles = makeStyles(theme => ({ root: { marginTop: '15px', display: 'f ...

cssreactjsmaterial-ui

What is the best way to conceal my class element if the data-reviews number is under 5?

I have been experimenting with basic JavaScript for the data-reviews="2" scenario and it worked successfully. However, what I am aiming for is to hide the entire <span> section when the value of data-reviews is less than 5 or any specific ...

javascripthtmlcss

`html2canvas encountered an issue: Unable to locate a logger instance`

When I use html2canvas to render the same content repeatedly, I encounter an error about 5% of the time. It seems to be sporadic and I'm not sure why it occurs. What could be causing this unpredictable behavior? html2canvas.js:2396 Uncaught (in promi ...

javascripthtmlhtml2canvas

Is there a way to disable auto rotation on a website when accessed from a mobile phone?

My current solution involves the following code: @media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) { html{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(- ...

javascripthtmlcssfrontendscreen-rotation

Using CSS to ensure that the cards have consistent heights when using both React and Bootstrap

I am currently working with Bootstrap 4 in React. I have encountered an issue where the card for Item 1 is shorter than that of Item 2, and I would like both cards to have the same height. Additionally, I anticipate adding more cards at the bottom in the ...

cssreactjsbootstrap-4

Activate scroll event when image src changes in Angular using jQuery

Seeking assistance with utilizing jQuery to scroll to a specific thumbnail inside a modal when left/right arrows are pressed. The modal should appear when the user clicks on an image. I've managed to implement scrolling upon clicking a thumbnail, but ...

javascriptjqueryhtmlangularjs

Guide to generating a dropdown menu and linking it with data received from a server

I am completely new to Angular and recently received a project involving it. My task is to create a nested dropdown list for Json data retrieved from a server using Rest Api calls. The data contains a Level attribute that indicates the hierarchy level of ...

htmlangulartypescript

Ways to implement the tabIndex attribute in JSX

As per the guidelines provided in the react documentation, this code snippet is expected to function properly. <div tabIndex="0"></div> However, upon testing it myself, I encountered an issue where the input was not working as intended and ...

javascripthtmlreactjsjsxtabindex

Choosing one item from an array to showcase in a view [Angular]

I've previously inquired about this issue without success. My current challenge involves a store app created with AngularJS. I am trying to implement a feature where clicking on an item will open it in a separate "item" view, displaying only the info ...

javascripthtmlarraysangularjs

Increase the size of the box-shadow so that it extends beyond the boundaries

Can we create a wider box-shadow in CSS than the actual HTML element it is being applied to, while maintaining the same height as the element? Increasing the spread of the shadow typically increases the height as well. In the provided code snippet, the max ...

htmlcss

Printing content to an HTML page using Node.js

I'm seeking advice on using Node JS, AJAX, and other related technologies. My goal is to display the content of a JSON file on my HTML page. While I've been successful in saving new objects to the JSON file, I'm struggling to find an effecti ...

javascripthtmljsonnode.js