How to show 4 different elements at the same time on full page, using css.?

Hendrik Bezuidenhout 20

I have a page, that has a upload form in it, but now I want to let the page look like something and not just boring
I have my form (upload) then have the following i want to add. wave.png, island.png stars.jpg.
I can not get it to show all of them on the correct place Stars and island must be full page then wave must be at bottom, but I cannot get it there if I use botom, it only shows it just below center of page.

So stars and island full page then wave bottom, then my form on top of that in the center. ( would like to have the waves animated). What is the problem with this code.

`body {

background-image: url(./assets/images/wave.png), url(./assets/images/island.png), url(./assets/images/stars.jpg);
background-position: center , center center, center center;
background-repeat: no-repeat;
background-size: auto, cover, auto 200px;
font-family: Arial, sans-serif;
text-align: center;
color: white;

} /* Styles the main heading / h1 { font-size: 40px; margin: 50px 0; } / Styles the form container / form { margin: 0 auto; / centers the form / max-width: 500px; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border: 5px solid #800080; / dark purple / } / Styles the labels for form inputs / label { display: block; margin: 10px 0; text-align: left; font-size: 20px; color: #333333; / dark gray / } / Styles the file input / input[type="file"] { background-color: #FF69B4; / pink / color: white; font-size: 20px; padding: 10px 20px; border: none; border-radius: 20px; margin: 30px 0; } / Styles the submit button / input[type="submit"] { background-color: #FF69B4; / pink / color: white; font-size: 20px; padding: 10px 20px; border: none; border-radius: 20px; } / Styles the text input / input[type="text"] { font-size: 20px; padding: 10px; border-radius: 20px; border: 2px solid #ccc; / light gray / width: 100%; box-sizing: border-box; outline: none; } / Styles the label for the "description" input / label[for="description"] { color: #023020; / dark green / } / Styles the label for the "value" input / label[for="value"] { color: #00FFFF; / light blue */ } `

Lan Huang-MSFT 29,666 Microsoft Vendor

Hi @Hendrik Bezuidenhout,

I can not get it to show all of them on the correct place Stars and island must be full page then wave must be at bottom

I don't quite understand the correct position you mentioned, it's hard to understand your layout just by describing it in words.

Best to provide your html code as well.

but I cannot get it there if I use botom, it only shows it just below center of page.

You need to set background-attachment: fixed;

would like to have the waves animated

The following is an example I wrote based on my own understanding, you can see if it is helpful to you.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        html, body {
            height: 100%;
        }
        body {
            background-image: url(./assets/images/island.png),url(./assets/images/stars.jpg),radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
            background-position: bottom;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: auto 500px, cover;
            font-family: Arial, sans-serif;
            text-align: center;
            color: white;
        }
        .ocean {
            height: 5%;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            background: #015871;
        }
        .wave {
            background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
            position: absolute;
            top: -198px;
            width: 6400px;
            height: 198px;
            animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
            transform: translate3d(0, 0, 0);
        }
            .wave:nth-of-type(2) {
                top: -175px;
                animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
                opacity: 1;
            }

        @keyframes wave {
            0% {
                margin-left: 0;
            }

            100% {
                margin-left: -1600px;
            }
        }

        @keyframes swell {
            0%, 100% {
                transform: translate3d(0,-25px,0);
            }

            50% {
                transform: translate3d(0,5px,0);
            }
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="ocean">
            <div class="wave"></div>
            <div class="wave"></div>
        </div>
    </form>
</body>
</html>

Hendrik Bezuidenhout 20

Thank you here is my full code that I have. I got to show the waves now, but it is still on the top. and the upload where i dd info is at the back, but needs to be in front.

as you can see in the picture, it must look like this, (without the word waterwave, the the second one is how i got it so var Screenshot_48

Screenshot_50

<!DOCTYPE html>
<html>
<head>
    <title>Laai Prent</title>
	<style>
        @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body 
{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100vh;
    background: #1f2028;
}
section
{
    position: relative;
    width: 100%;
    
}
section .waves 
{
    
/*    height: 100vh; /* set the height of the container element to be equal to the viewport height */
    position: relative; /* set the position property to relative so that the absolute position of the waves is relative to this container element */
    z-index: 5;  
}

section .waves .wave
{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: url(./assets/images/wave.png);
    background-size: 1000px 100px;
    background-repeat: no-repeat;   /* https://www.w3.org/TR/css-backgrounds-3/#layering */
}
section .wave#wave1
{
    z-index: 1000;
    opacity: 1;
    bottom: 0;
    animation: animate 4s linear infinite;
}
section .wave#wave2
{
    z-index: 999;
    opacity: 0.5;
    bottom: 10px;
    animation: animate2 4s linear infinite;
}
section .wave#wave3
{
    z-index: 998;
    opacity: 0.2;
    bottom: 15px;
    animation: animate 2s linear infinite;
}
section .wave#wave4
{
    z-index: 999;
    opacity: 0.7;
    bottom: 20px;
    animation: animate2 2s linear infinite;
}

@keyframes animate
{
    0%,100%
    {
        background-position-x: 1000px;
    }
    100%
    {
        background-position-x: 0px;
    }
}
@keyframes animate2
{
    0%,100%
    {
        background-position-x: 0px;
    }
    100%
    {
        background-position-x: 1000px;
    }
}
.island 
{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 53vw;
    height: 75vh;
    bottom: 0px;
    z-index: 10;
    pointer-events: none;
}
.stars
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
}
h2 
{
    position: absolute;
    bottom: 60vh;
    transform: translateY(50%);
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 10em;
    font-weight: 800;
    text-transform: uppercase;
    z-index: 10;
}
h1 {
    font-size: 40px;
    margin: 50px 0;
}

/* Styles the form container */
form {
    margin: 0 auto; /* centers the form */
    max-width: 500px;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border: 5px solid #800080; /* dark purple */
    z-index: 50; /* bring the form container in front of the island */
}

/* Styles the labels for form inputs */
label {
    display: block;
    margin: 10px 0;
    text-align: left;
    font-size: 20px;
    color: #333333; /* dark gray */
}

/* Styles the file input */
input[type="file"] {
    background-color: #FF69B4; /* pink */
    color: white;
    font-size: 20px;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    margin: 30px 0;
}

/* Styles the submit button */
input[type="submit"] {
    background-color: #FF69B4; /* pink */
    color: white;
    font-size: 20px;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
}

/* Styles the text input */
input[type="text"] {
    font-size: 20px;
    padding: 10px;
    border-radius: 20px;
    border: 2px solid #ccc; /* light gray */
    width: 100%;
    box-sizing: border-box;
    outline: none;
}

/* Styles the label for the "description" input */
label[for="description"] {
    color: #023020; /* dark green */
}

/* Styles the label for the "value" input */
label[for="value"] {
    color: #00FFFF; /* light blue */
}

</style>
<meta charset="UTF-8">
    <title>CSS Animation Effects</title>
<!--<link href="./assets/css/wave.css" rel="stylesheet" />-->

</head>


<?php
// Enable error reporting
ini_set('display_errors', 1);
error_reporting(E_ALL);

// Check if the form has been submitted
if(isset($_POST['submit'])) {
    // Connect to the database
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "kripto";
    $conn = new mysqli($servername, $username, $password, $dbname);
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

   
    // Handle the uploaded image
    if(isset($_FILES['image']) && $_FILES['image']['error'] == 0) {
        $name = $_FILES['image']['name'];
        $temp_name = $_FILES['image']['tmp_name'];
        $location = "./assets/images/versekering/";
        if(move_uploaded_file($temp_name, $location.$name)) {
            // Get the current max value from the database
            $query = "SELECT MAX(value) as max_value FROM versekering_images";
            $result = $conn->query($query);
            $row = $result->fetch_assoc();
            $value = $row['max_value'];

            // Insert the details into the database
            $description = $_POST['description'];
            $value = $_POST['value'];
$query = "INSERT INTO versekering_images (name, date_created, image_location, description, value) 
          VALUES ('$name', NOW(), '$location$name', '$description', '$value')";


            if ($conn->query($query) === TRUE) {
                echo "Image uploaded successfully";
                // Redirect to the page Huis_inhoud.php
                header("Location: Huis_inhoud.php");
                exit();
            } else {
                echo "Error: " . $query . "<br>" . $conn->error;
            }
        } else {
            echo "Error: Failed to move uploaded file.";
        }
    } else {
        echo "Error: File upload field is missing or null.";
    }

    // Close the database connection
    $conn->close();
}
?>

<body>
  <section>
    <div class="waves">
      <h1>Laai Prente</h1>
      <form method="post" enctype="multipart/form-data">
        <label for="image">Kies 'n prent om te laai:</label>
        <input type="file" name="image">
        <label for="description">Beskrywing:</label>
        <input type="text" name="description">
        <label for="value">Waarde:</label>
        <input type="text" name="value" value="R ">
        <input type="submit" name="submit" value="Upload">
      </form>
      
      <img src="./assets/images/stars.jpg" class="stars">
      <img src="./assets/images/island.png" class="island">
            <div class="wave" id="wave1"></div>
			<div class="wave" id="wave2"></div>
			<div class="wave" id="wave3"></div>
			<div class="wave" id="wave4"></div>
    </div>
  </section>
</body>




</html>

Accepted answer

Lan Huang-MSFT 29,666 Reputation points Microsoft Vendor

2023-03-14T08:13:37.3166667+00:00

Hi @Hendrik Bezuidenhout,

I got to show the waves now, but it is still on the top

As I pointed out above, you need to set background-attachment: fixed and background-position:bottom; in section .waves .wave

and the upload where i dd info is at the back, but needs to be in front.

set position:relative in form

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Hendrik Bezuidenhout 20 Reputation points

2023-03-14T09:50:53.2+00:00

I did that, thank you, just will try to fix the waves moves as it look not like it should
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

How to show 4 different elements at the same time on full page, using css.?

0 additional answers

Your answer