Pause the contact form functionalities with a background CSS animation utilizing keyframes

I am attempting to create a submission form using bootstrap + wp with an animated background using only css. The animation is functioning properly, but when I place the form within the same div container, it does not work at all. I have tried adjusting the z-index css property, but still cannot resolve the issue. It seems like the animation is overlapping the form. I am unsure of how to fix this problem. My goal is to make sure that the form works correctly alongside the animated background.

.space {
  position: relative;
  display: block;
  height: 100vh;
  width: 100%;
  background-color: #1B2735;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  color: white;
  padding-top: 20vh;
}

.stars > div {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.stars .stars-back {
  top: -50%;
  opacity: 0.5;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 90px 40px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 300px 300px;
  animation: stars 4s infinite linear;
}

.stars .stars-middle {
  background-image: 
    radial-gradient(3px 3px at 50px 160px, #ddd, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: stars 2.5s infinite linear;
}
@keyframes stars {
  0% {
    top: -100%;
  }
  100% {
    top: 0;
  }
}
<div class="jumbotron space">
  <div class="stars">
    <div class="stars-back"></div>
    <div class="stars-middle"></div>
    <div class="stars-front"></div>
  </div>
  <h1>Jumbotron heading</h1>
        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5a0a8a4aca985a0bda4a8b5a9a0eba6aaa8">[email protected]</a></p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>
</div>

Answer №1

If you want to position your form element in a specific location on the webpage, one option is to wrap your code in a parent div with its position set to relative. Then, you can set the position of your form element to absolute and adjust its placement using left and/or top values. This approach will remove the element from the normal document flow.

.space {
  position: relative;
  display: block;
  height: 100vh;
  width: 100%;
  background-color: #1B2735;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  color: white;
  padding-top: 20vh;
}

#parent {
  position: relative;
}

.form {
  color: white;
  position: absolute;
  left: 0;
  top: 40%;
}

.stars>div {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.stars .stars-back {
  top: -50%;
  opacity: 0.5;
  background-image: radial-gradient(2px 2px at 20px 30px, #eee, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 40px 70px, #fff, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 90px 40px, #fff, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0, 0, 0, 0));
  background-repeat: repeat;
  background-size: 300px 300px;
  animation: stars 4s infinite linear;
}

.stars .stars-middle {
  background-image: radial-gradient(3px 3px at 50px 160px, #ddd, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 90px 40px, #fff, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 130px 80px, #fff, rgba(0, 0, 0, 0));
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: stars 2.5s infinite linear;
}

@keyframes stars {
  0% {
    top: -100%;
  }
  100% {
    top: 0;
  }
}
<div id="parent">
  <div class="jumbotron space">
    <div class="stars">
      <div class="stars-back"></div>
      <div class="stars-middle"></div>
      <div class="stars-front"></div>
    </div>
    <h1>Jumbotron heading</h1>
    <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  </div>
  <form class="form-inline form">
    <div class="form-group">
      <label class="sr-only">Email</label>
      <p class="form-control-static"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791c14181015391c01181409151c571a1614">[email protected]</a></p>
    </div>
    <div class="form-group">
      <label for="inputPassword2" class="sr-only">Password</label>
      <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-default">Confirm identity</button>
  </form>
</div>

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

Randomly positioning an image while the page is loading

I've been developing a portfolio website to showcase my design work, but I've encountered a minor issue. My goal is to have the images load in random positions and then make them draggable using Dragabilly. However, sometimes all the images end ...

Display a list group in two columns using Bootstrap 4's grid system

Is there a way to create a list-group with 2 columns using bootstrap 4? <div class="categories"> <h4>Categories</h4> <ul class="list-group"> <li class="list-group-item active">Name 1</li> <li clas ...

What steps should I take to get my fixed position to function properly in Internet Explorer 6?

I've attempted the following to solve my issue: body {height: 100%;overflow: auto; body #cornerImage {position: absolute;bottom: 0;} I also tried this solution: { margin:0; padding:0; } html, body { height: 100%; overflow:auto; } body #fixe ...

Validating phone numbers using AngularJS

Seeking validation for phone numbers based on specific conditions: - If all 10 digits are identical, show an error message. - If it begins with the number 1, display an error message. Have you encountered a similar scenario? Please share your sug ...

Enhance a link using jQuery to allow it to expand and collapse

I am currently working on an MVC view that features a 3-column table showcasing a list of products. The first column, which contains the product names, is clickable and directs users to a specific product page. I am looking to implement functionality where ...

What is the process for choosing corresponding values in jQuery?

Hello, I am a beginner in programming and I am currently working on developing a word guessing game. Here is the code I have written so far: The (letter) represents the key being typed by the player Var compareLetters = $('.letter') represents ...

Utilizing ease-in effect on show more button clicks in CSS

When I click "show more," I want to have a smooth ease-in/out animation for 3 seconds. However, I am facing difficulties achieving this because I am using overflow: hidden and -webkit-line-clamp: 2; Are there any other methods to accomplish this? https: ...

Dynamically obtaining the screen width in JSP using a variable

Could someone provide assistance on how to resize an image using an img src="blah.jpg?width=x" so that my page can be displayed at various sizes? I just need x (width) as a JSP variable. Update 2021: It's been 9 years since this question wa ...

What is the best method to extract individual data values from ul li tags using PHP?

As I navigate through a page filled with HTML codes, I stumble upon snippets like this: <ul class ='trainList'> <li> <div class="smallFont farelist no-discount "> <div class="train-no">ABC 701</div> ...

Move the page to the beginning of the vertical stepper upon clicking the "next" button

I am currently working on optimizing a lengthy form to enhance user experience. To illustrate my point, I have come across a simplified example of the code I am dealing with which can be found here. My primary goal is to ensure that when a user proceeds t ...

Setting the background color of a table header to 70% width within a table is achievable

I'm looking to style the th attribute with a bgcolor, but only at a width of 70%. The header reads "Mega Event Offer" and I want to give it a background color as well. However, since its width is large, it's overlapping onto the heading. Is there ...

concealing components during screen adjustments

There are 3 identical <div>s available: <div class="box">Hello World!</div> <div class="box">Hello World!</div> <div class="box">Hello World!</div> I need these <div>s to ...

Enhance your form input-group in Bootstrap-4 by adding a stylish border and background-color through validation

I'm working on a form using Bootstrap 4 and I need to display validation errors. Specifically, I want the text field with an input-group for the password to have the same styling as the Username field when there is an error (i.e., red border and backg ...

Steps to redirect to a webpage by clicking on an image without relying on anchor tags

Is it possible to redirect to a new webpage without using an anchor tag when someone clicks on an image? Below is my code for the image. <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/368px-Google_2015_l ...

I am experiencing an issue where the CSS file is not being loaded in my HTML file while using the Netbeans IDE

I am a beginner in HTML and CSS and I have been trying to link my CSS file to my HTML code after reading various solutions on Stack Overflow. Unfortunately, I am facing difficulty as the CSS file is not loading in my HTML code. If anyone can offer assistan ...

Typekit compatibility with Internet Explorer 11

After dedicating months to a project, everything seemed to be running smoothly until one client consistently pointed out font discrepancies in the screenshots. I attributed this to a possible browser issue but soon discovered that the entire network had sp ...

Is there a way to increase the size of my ASP.NET CalendarExtender component?

As I work on adapting my company's website for mobile devices, I find myself facing a challenge with manipulating the CalendarExtender on one of the text fields. Although most of my experience lies in HTML manipulation rather than ASP.NET programming, ...

Converting a 'div' element into a dropdown menu with CSS and Jquery

I am facing a challenge where I have a collection of buttons enclosed in a div that I want to resemble a dropdown: <div id = "group"> <label> Group: </ label> <div value =" 1hour "> 1h < / div> <div value =" 2hou ...

What is the best method for properly inserting images into a Vue Carousel 3D slider?

I'm currently exploring the Vue Carousel 3D documentation and I am having trouble displaying a single image on each slide. Let me elaborate: I aim to create a slider similar to the one shown in the Controls Customized example in the documentation. Th ...

How can I customize the color of the Title Component in Ant Design using Styled Components?

I am currently integrating Ant Design with styled components in my project. One of the components in my application is a NavBar that includes an H1 Component. H1.tsx import React from 'react'; import { Typography } from 'antd'; impor ...