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