show 3 different elements at the same time on full page with css., css problem with images on full page Options

[thehen]

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.

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 */
}

[Christian J]

Seems "background-attachment: fixed;" fixes it (not sure why?). I also positioned the images to the bottom, so that the island won't be hanging in thin air in large windows. I also made the wave repeat on the x-axis so it covers any window width.

CODE

body {
    background-image:
    url('island.png'),
    url('wave.png'),
    url('stars.jpg');

    background-size:
    auto,
    auto,
    cover;

    background-position:
    bottom left,
    bottom left,
    bottom center;

    background-repeat:
    no-repeat,
    repeat-x,
    no-repeat;

    background-attachment: fixed;

    font-family: Arial, sans-serif;
    text-align: center;
    color: white;
    background-color: black;
}

[thehen]

Seems "background-attachment: fixed;" fixes it (not sure why?). I also positioned the images to the bottom, so that the island won't be hanging in thin air in large windows. I also made the wave repeat on the x-axis so it covers any window width.

CODE

body {
    background-image:
    url('island.png'),
    url('wave.png'),
    url('stars.jpg');

    background-size:
    auto,
    auto,
    cover;

    background-position:
    bottom left,
    bottom left,
    bottom center;

    background-repeat:
    no-repeat,
    repeat-x,
    no-repeat;

    background-attachment: fixed;

    font-family: Arial, sans-serif;
    text-align: center;
    color: white;
    background-color: black;
}

I must thank you for all this hard work, never know that background will fix it, just one question how can i get the wave in front of the island, is it possible

[Christian J]

You're welcome!

just one question how can i get the wave in front of the island, is it possible

Just change the order they are specified (as well as their respective size and position, of course).

See also https://www.w3.org/TR/css-backgrounds-3/#layering

[thehen]

You're welcome!

just one question how can i get the wave in front of the island, is it possible

Just change the order they are specified (as well as their respective size and position, of course).

See also https://www.w3.org/TR/css-backgrounds-3/#layering

Thank you for the link, did help