The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> show 3 different elements at the same time on full page with css., css problem with images on full page
thehen
post 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 */
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Mar 13 2023, 05:05 AM
Post #2


Advanced Member
****

Group: Members
Posts: 206
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. IPB Image
  1. the HTML code
  2. the wave.png, island.png and stars.jpg images

coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
thehen
post Mar 13 2023, 05:23 AM
Post #3


Newbie
*

Group: Members
Posts: 14
Joined: 9-May 21
Member No.: 27,932
QUOTE(coothead @ Mar 13 2023, 05:05 AM) *

Hi there thehen,

you post seems to be missing two things that might
help members here to resolve your problems. IPB Image
  1. the HTML code
  2. the wave.png, island.png and stars.jpg images
coothead

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)
Attached Image Attached Image Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 13 2023, 11:02 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
QUOTE(thehen @ Mar 13 2023, 10:21 AM) *

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. unsure.gif 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.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 13 2023, 12:14 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,661
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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
thehen
post Mar 13 2023, 12:46 PM
Post #6


Newbie
*

Group: Members
Posts: 14
Joined: 9-May 21
Member No.: 27,932
QUOTE(Christian J @ Mar 13 2023, 12:14 PM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 13 2023, 05:17 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
You're welcome!

QUOTE(thehen @ Mar 13 2023, 06:46 PM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
thehen
post Mar 14 2023, 12:42 AM
Post #8


Newbie
*

Group: Members
Posts: 14
Joined: 9-May 21
Member No.: 27,932
QUOTE(Christian J @ Mar 13 2023, 05:17 PM) *

You're welcome!

QUOTE(thehen @ Mar 13 2023, 06:46 PM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 01:27 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC