HTML Bild in den Hintergrund

EinzzCookie · 06.12.2022

Mein code:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>

<body>

<b>
<h1><center><font size="75">Login Authentication System</font></center></h1>
<a href="{{ url_for('login') }}"><center><font size="50">Login Page</font></center></a><br><p>
<a href="{{ url_for('register') }}"><center><font size="50">Register Page</font></center></a><br>
<img src="https://img.freepik.com/vektoren-ko...-aquarellhintergrund_23-2149005675.jpg?w=2000" alt="" align="center" width="1220" height="620" class="bar-sm" "<>" >
<b>
</body>

</html>

Mein Ziel:
Das login zeugs soll in den Vordergrund also das hier:
<h1><center><font size="75">Login Authentication System</font></center></h1>
<a href="{{ url_for('login') }}"><center><font size="50">Login Page</font></center></a><br><p>
<a href="{{ url_for('register') }}"><center><font size="50">Register Page</font></center></a><br>

Bitte helft mir, danke!

Sempervivum · 06.12.2022

Ich verstehe das so, dass die Login-Sachen das Bild überdecken sollen?
Das erreichst Du am besten durch CSS background-image:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image?retiredLocale=de

BTW: Dein HTML ist stark veraltet: Die Tags <center>, <font> und <b> gibt es nicht mehr, Du erreichst das selbe mit CSS.

EinzzCookie · 06.12.2022

Aber ich schreibe ja nicht mit CCS sondern mit Python und HTML?

Sempervivum · 06.12.2022

Ohne CSS geht es heute nicht mehr. Benutzt Du vielleicht Flask, damit hatte ich in der Vergangenheit ein wenig zu tun?
In jedem Fall kannst Du in einer HTML-Datei auch CSS verwenden, siehe hier:
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden

EinzzCookie · 06.12.2022

Ja ich nutze Flask

EinzzCookie · 06.12.2022

Und wie binde ich css in meinem beispiel ein? Code habe ich ja oben gepostet

Sempervivum · 06.12.2022

Wenn ich mich richtig erinnere, arbeitet man in Flask mit Templates und die Platzhalter, die dazu gehören, finde ich auch in deinem Code. Was auf jeden Fall gehen müsste, ist, das CSS in einem style-Element im Head zu definieren, wie bei Selfhtml in diesem Abschnitt beschrieben:
https://wiki.selfhtml.org/wiki/CSS/...eets_einbinden#zentral_in_einem_style-Element
Das kannst Du ja in deinem Template aufnehmen. Auch die Definition des CSS in einer externen Datei sollte möglich sein, allerdings bin ich da früher nicht eingestiegen und mit dem Referenzieren nicht vertraut.

EinzzCookie · 06.12.2022

Ich habe gerade bissel Zeitdruck, könntest du mir hier bitte den Code geben, den ich brauche? Danke

Sempervivum · 06.12.2022

Als Einstieg hier das Bild als Hintergrund. Das Umstellen der anderen Tags und die Feinheiten kannst Du dann selbst machen, siehe hier:
https://developer.mozilla.org/en-US/docs/Web/CSS/background?retiredLocale=de

Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background-image: url(https://img.freepik.com/vektoren-kostenlos/handgemalter-aquarell-abstrakter-aquarellhintergrund_23-2149005675.jpg?w=2000);
        }
    </style>
    <title>Home</title>
</head>

<body>

    <h1>
        <center>
            <font size="75">Login Authentication System</font>
        </center>
    </h1>
    <a href="{{ url_for('login') }}">
        <center>
            <font size="50">Login Page</font>
        </center>
    </a><br>
    <p>
        <a href="{{ url_for('register') }}">
            <center>
                <font size="50">Register Page</font>
            </center>
        </a><br>
        <!-- Hier fehlte das schließende </p> -->
    </p>
</body>

</html>

EinzzCookie · 06.12.2022

Danke vielmals

EinzzCookie · 06.12.2022

Mega danke klappt genau wie ich es brauchte!

EinzzCookie · 06.12.2022

Eine Frage noch:

hierbei:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw0NDQ0NDQ0NDQ0NDQ0HCA0ICA8IDQcNFREWFhURExUYHSggGBolGxMVITEhJSkrLi4uFx8zOD8sNygtOisBCgoKDg0NFRAPFS0ZFRktLSsrKystKy0tKystLS0tNysrNy0tLS03Ky0tKy0rKzcrLSsrKy03Ky0rKysrKysrK//AABEIAKgBLAMBIgACEQEDEQH/xAAaAAADAQEBAQAAAAAAAAAAAAAAAQIDBAUH/8QAJRABAQEBAAAFBAMBAQAAAAAAAAERAgMhQWGRMXGx8IHB4UIS/8QAGQEBAQEBAQEAAAAAAAAAAAAAAQACAwQF/8QAFxEBAQEBAAAAAAAAAAAAAAAAABEBAv/aAAwDAQACEQMRAD8A+UeD4m+VzfT3a/Hw4tdHh+Jv39Xt56cNxr8fA+PhOjW2VH/CNGllfx8DE6NaA/foBS1JRdc7/RaeoMDad875z6/lkxuRq0wAgDAQDn8fwv8AqfT1k9HQeHebhzY4TaeL4f8A5vtfp7Ico6WgwCD56y7+11c3ZrlxXh9Z9vVrnYz1ldIly7ClN1cnTx3s/Pspy8dZfz7umXXbnquW4ACrTIAAREdqRpMQjjJebp89WeadLXgfQdfPe/v0OVzcd5/badOvO1jcaaNRp60xq5RqNEpwNNFTp60COUqUqC9R3z6/JwzKLGYPrnP36ExGqZ4SiKAARSs3yrm74y/j3dSe+ZZ+PYbzTz1HKZ3mzypubpSkMGQrw+s8vT8NnO18Pr0v8N5rHWLX4fefb19kBvNjDp0MvD69Pj2aWuubXPcgGlpJAAhqBxJyhPL00h899FauOsRKDms66NPWPHX+NNdc2ue4uU0applUp6kN4zq9KwoosplVqbBKktFn+KFUVQelQCZwj1AwUppI8Tnfv6MXSz8Tj1+fcbjWazAEZaBwBBrx0pjGvN1vNZ3Dacd+n7WYazYzuVsE89abpWINIFaEYlScCeWaQ+e+go06CF6vnpkqVvNZ3G8pys+auOmOWqOJlVG8ZM4nTaZWj6HDqRacqAlF1B6KNQ00iJKBaaSgk5SGffPqlsy6mfZncbzSADJMS4RlNZdNlzcaa2xuHq5WeiU5sZ3GhDSaAOJOUUvLlNGnK+e9yjINBRpNrGdXGkrKKlbzWdxpKqVEVK6ZrmqU0ynpoihqTIh1Ci6i1YJT1ByimKpDSSUaYZoh6aTQMUtNJlYGliGdazQCNIKlTTKWClBZOVSDlOaoqiJ04g8s0m8OPaqGk9IUaTjWDVHEnGmV81crJUreazuNNPWeqlarMXKNSNNEXo1OhUQ+p6p09T15DTitGplPVVD05UhJoESqazRDMgQabDCSAqxLJMEEj05UmqlAoCD04k4VHmgB4XsMyBZXBEyqaCgk2qIqKiDIVpplGmiL05UaemiL09Z6etURehGnqohXyEp1AaXKeolOVURZys9VpojTQiU9aoUC0SkGVh6VGogVAJggkcqtQZqVaIk4qHngB43rBkEFAg0F6EnpqUaTNEM0mRDOVI1URWnqNPTVF6NRKemiKFTo1KFp6XUTopaSnrPT00RpqpWWqlNG40GpnRytVmHppMgyASABAmCMoKiFcpOAAPI9IAJIzSaB6aQUuU0HpCj1I0pWhOjUDPU2lqpi9Gpg1URYTp6aIrU0aNShSnKmlopjTRqNPTRGmqlZSqlazRuNNOVGjWqzF6NTpmiKoTo1VRQSClHKhUQcQAeV6QAEknoIJQSEooaWjTVFApQaIrQWjSjKgBDRqaFVFjU6NVUXo1I00RVTRoSGnqQKVynKgSmiNJVay1UrWaNxpp6jRrVZi9NB6aIoEElHKlXJEcYAed3AASBUBIgAyQAEgcoBRgAgABIiACwDTCI09AIGjQEipSmEsGmAkcoAOBUqgGmQYDWA5TgBBq5AIf/Z);
}
</style>
<title>Dashboard</title>
</head>
<body>
<h1>Hello you are logged in.</h1>
<a href="{{url_for('logout')}}">Press here to logout</a>
</body>
</html>

kommt jetzt das andere bild 10000 mal gefühlt auf die webseite, wie behebe ich das?

Sempervivum · 06.12.2022

Das ist das Standardverhalten: Ist ein Bild zu klein, um das Fenster auszufüllen, wird es wiederholt. Ich nehme an, Du willst, dass das Bild das Fenster vollständig ausfüllt? Das kannst Du mit background-size erreichen:

Code:

    <style>
        html,
        body {
            /* body soll die Höhe des Browserfensters vollständig ausfüllen: */
            height: 100%;
        }

        body {
            background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw0NDQ0NDQ0NDQ0NDQ0HCA0ICA8IDQcNFREWFhURExUYHSggGBolGxMVITEhJSkrLi4uFx8zOD8sNygtOisBCgoKDg0NFRAPFS0ZFRktLSsrKystKy0tKystLS0tNysrNy0tLS03Ky0tKy0rKzcrLSsrKy03Ky0rKysrKysrK//AABEIAKgBLAMBIgACEQEDEQH/xAAaAAADAQEBAQAAAAAAAAAAAAAAAQIDBAUH/8QAJRABAQEBAAAFBAMBAQAAAAAAAAERAgMhQWGRMXGx8IHB4UIS/8QAGQEBAQEBAQEAAAAAAAAAAAAAAQACAwQF/8QAFxEBAQEBAAAAAAAAAAAAAAAAABEBAv/aAAwDAQACEQMRAD8A+UeD4m+VzfT3a/Hw4tdHh+Jv39Xt56cNxr8fA+PhOjW2VH/CNGllfx8DE6NaA/foBS1JRdc7/RaeoMDad875z6/lkxuRq0wAgDAQDn8fwv8AqfT1k9HQeHebhzY4TaeL4f8A5vtfp7Ico6WgwCD56y7+11c3ZrlxXh9Z9vVrnYz1ldIly7ClN1cnTx3s/Pspy8dZfz7umXXbnquW4ACrTIAAREdqRpMQjjJebp89WeadLXgfQdfPe/v0OVzcd5/badOvO1jcaaNRp60xq5RqNEpwNNFTp60COUqUqC9R3z6/JwzKLGYPrnP36ExGqZ4SiKAARSs3yrm74y/j3dSe+ZZ+PYbzTz1HKZ3mzypubpSkMGQrw+s8vT8NnO18Pr0v8N5rHWLX4fefb19kBvNjDp0MvD69Pj2aWuubXPcgGlpJAAhqBxJyhPL00h899FauOsRKDms66NPWPHX+NNdc2ue4uU0applUp6kN4zq9KwoosplVqbBKktFn+KFUVQelQCZwj1AwUppI8Tnfv6MXSz8Tj1+fcbjWazAEZaBwBBrx0pjGvN1vNZ3Dacd+n7WYazYzuVsE89abpWINIFaEYlScCeWaQ+e+go06CF6vnpkqVvNZ3G8pys+auOmOWqOJlVG8ZM4nTaZWj6HDqRacqAlF1B6KNQ00iJKBaaSgk5SGffPqlsy6mfZncbzSADJMS4RlNZdNlzcaa2xuHq5WeiU5sZ3GhDSaAOJOUUvLlNGnK+e9yjINBRpNrGdXGkrKKlbzWdxpKqVEVK6ZrmqU0ynpoihqTIh1Ci6i1YJT1ByimKpDSSUaYZoh6aTQMUtNJlYGliGdazQCNIKlTTKWClBZOVSDlOaoqiJ04g8s0m8OPaqGk9IUaTjWDVHEnGmV81crJUreazuNNPWeqlarMXKNSNNEXo1OhUQ+p6p09T15DTitGplPVVD05UhJoESqazRDMgQabDCSAqxLJMEEj05UmqlAoCD04k4VHmgB4XsMyBZXBEyqaCgk2qIqKiDIVpplGmiL05UaemiL09Z6etURehGnqohXyEp1AaXKeolOVURZys9VpojTQiU9aoUC0SkGVh6VGogVAJggkcqtQZqVaIk4qHngB43rBkEFAg0F6EnpqUaTNEM0mRDOVI1URWnqNPTVF6NRKemiKFTo1KFp6XUTopaSnrPT00RpqpWWqlNG40GpnRytVmHppMgyASABAmCMoKiFcpOAAPI9IAJIzSaB6aQUuU0HpCj1I0pWhOjUDPU2lqpi9Gpg1URYTp6aIrU0aNShSnKmlopjTRqNPTRGmqlZSqlazRuNNOVGjWqzF6NTpmiKoTo1VRQSClHKhUQcQAeV6QAEknoIJQSEooaWjTVFApQaIrQWjSjKgBDRqaFVFjU6NVUXo1I00RVTRoSGnqQKVynKgSmiNJVay1UrWaNxpp6jRrVZi9NB6aIoEElHKlXJEcYAed3AASBUBIgAyQAEgcoBRgAgABIiACwDTCI09AIGjQEipSmEsGmAkcoAOBUqgGmQYDWA5TgBBq5AIf/Z);
            background-size: cover;
            /*
            Oder, da es sich um ein Muster handelt, bei dem eine Verzerrung wahrscheinlich
            nicht stört:
            background-size: 100% 100%;
            */
        }
    </style>

Dabei wird das Bild stark vergrößert. Normaler Weise ist das nicht gewünscht aber das es sich bei deinem Bild um ein Muster mit Farbverläufen handelt, kann man es u. U. akzeptieren.

EinzzCookie · 07.12.2022

Danke

EinzzCookie · 07.12.2022

Hey Sempervivum,

kannst du mir noch bei einer Sache helfen? Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url(https://img.freepik.com/vektoren-ko...quarellhintergrund_23-2149005675.jpg?w=2000);
}
</style>
<title>Login</title>
</head>
<body>
<center>

<h1>Login Page</h1>
<form method="POST" action="">
{{ form.hidden_tag() }}
{{ form.username }}
<font size="50">{{ form.password }}</font>
<font size="50">{{ form.submit }}</font>
</form>
<a href="{{ url_for('register') }}"><font size="10">Don't have an account? Sign Up</font></a>
</center>
</body>
</html>

Wie mache ich die Überschrift groß aber nicht zu groß?
Wie mache ich das Dont have an account? kleiner?
Wie mache ich die Input Boxen größer?

scatello · 07.12.2022

Siehe
https://www.w3schools.com/css/default.asp
https://www.w3schools.com/css/css_font_size.asp

EinzzCookie · 07.12.2022

erstmal danke schaue ich mir gleich an

scatello · 07.12.2022

Du solltest auch noch center und font-size aus dem HTML-Code entfernen und auch per CSS regeln.

EinzzCookie · 07.12.2022

ok hab klappt gut, wie ändere ich denn die größe von dem hier:

<h1 style="font-size:5vw">Login Page</h1>
<form method="POST" action="">
{{ form.hidden_tag() }}
{{ form.username }}
{{ form.password }}
{{ form.submit }}

scatello · 07.12.2022

EinzzCookie schrieb:
wie ändere ich denn die größe von dem hier

Von was? Und mit allergrößter Wahrscheinlichkeit wirst du die Lösung ebenfalls auf W3Schools finden können.

HTML Bild in den Hintergrund

EinzzCookie

Member

Sempervivum

Well-known member

EinzzCookie

Member

Sempervivum

Well-known member

EinzzCookie

Member

EinzzCookie

Member

Sempervivum

Well-known member

EinzzCookie

Member

Sempervivum

Well-known member

EinzzCookie

Member

EinzzCookie

Member

EinzzCookie

Member

Sempervivum

Well-known member

EinzzCookie

Member

EinzzCookie

Member

scatello

Well-known member

EinzzCookie

Member

scatello

Well-known member

EinzzCookie

Member

scatello

Well-known member

HTML Bild in den Hintergrund