show 3 different elements at the same time on full page with css., css problem with images on full page |
show 3 different elements at the same time on full page with css., css problem with images on full page |
thehen |
Mar 13 2023, 04:21 AM
Post
#1
|
Newbie Group: Members Posts: 14 Joined: 9-May 21 Member No.: 27,932 |
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 */ } |
coothead |
Mar 13 2023, 05:05 AM
Post
#2
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there thehen,
you post seems to be missing two things that might help members here to resolve your problems.
coothead |
thehen |
Mar 13 2023, 05:23 AM
Post
#3
|
Newbie Group: Members Posts: 14 Joined: 9-May 21 Member No.: 27,932 |
Hi there thehen, you post seems to be missing two things that might help members here to resolve your problems.
ok here are the html code and the images CODE <!DOCTYPE html> <html> <head> <title>Laai Prent</title> <style> /* Sets the background color and font for the whole page */ body { background-image: url(./assets/images/island.png), url(./assets/images/stars.jpg), url(./assets/images/wave.png); background-position: top left, center center, bottom center; background-repeat: no-repeat; background-size: auto, cover, auto 200px; font-family: Arial, sans-serif; text-align: center; color: white; } #wave { position: relative; z-index: 1; } /* 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 */ } </style> </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> <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> </body> </html> Attached thumbnail(s) |
Christian J |
Mar 13 2023, 11:02 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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. Seems the images are sized and positioned relative to the BODY element, not the canvas (HTML element), which is not how I understand the CSS spec. I tried applying the background CSS to the HTML element instead, but that didn't make any difference either. BODY's background-color does cover the entire viewport, though. Now since there's just a little content in BODY, it may not extend all the way down the viewport, in which case the images may extend below the BODY area (give BODY a border to see this). You might give BODY a height of say 100vh to make it expand to the bottom of the viewport, but that still makes the wave image show up in unexpected places, depending on window size and browser zoom amount. The order of the images also matters, since the first one is layered closest to the viewer. I'd suggest the order Island, Wave, Stars; otherwise the stars might cover the wave. (Sidenote: the PHP code seems to print text between the HEAD and BODY elements.) |
Christian J |
Mar 13 2023, 12:14 PM
Post
#5
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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 |
Mar 13 2023, 12:46 PM
Post
#6
|
Newbie Group: Members Posts: 14 Joined: 9-May 21 Member No.: 27,932 |
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 |
Mar 13 2023, 05:17 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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 |
Mar 14 2023, 12:42 AM
Post
#8
|
Newbie Group: Members Posts: 14 Joined: 9-May 21 Member No.: 27,932 |
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 |
Lo-Fi Version | Time is now: 24th September 2024 - 06:02 PM |