HTML Bild in den Hintergrund

Diskutiere HTML Bild in den Hintergrund im HTML Forum im Bereich Programmierung; Mein code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">...
E

EinzzCookie

Member
Beiträge
19
Punkte Reaktionen
0
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!
 
E

EinzzCookie

Member
Beiträge
19
Punkte Reaktionen
0
Aber ich schreibe ja nicht mit CCS sondern mit Python und HTML?
 
E

EinzzCookie

Member
Beiträge
19
Punkte Reaktionen
0
Und wie binde ich css in meinem beispiel ein? Code habe ich ja oben gepostet
 
S

Sempervivum

Well-known member
Beiträge
329
Punkte Reaktionen
50
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.
 
E

EinzzCookie

Member
Beiträge
19
Punkte Reaktionen
0
Ich habe gerade bissel Zeitdruck, könntest du mir hier bitte den Code geben, den ich brauche? Danke
 
S

Sempervivum

Well-known member
Beiträge
329
Punkte Reaktionen
50
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>
 
E

EinzzCookie

Member
Beiträge
19
Punkte Reaktionen
0
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?
 
S

Sempervivum

Well-known member
Beiträge
329
Punkte Reaktionen
50
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.
 
E

EinzzCookie

Member
Beiträge
19
Punkte Reaktionen
0
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?
 
S

scatello

Well-known member
Beiträge
343
Punkte Reaktionen
25
Du solltest auch noch center und font-size aus dem HTML-Code entfernen und auch per CSS regeln. ;)
 
E

EinzzCookie

Member
Beiträge
19
Punkte Reaktionen
0
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 }}
 
Thema:

HTML Bild in den Hintergrund

Oben Unten