Gut schnell zum Punkt, in eine Div Box möchte ich ein Bild einführen. Aber bei der Umsetzung komme ich nicht weiter.

Neveles90 · 25.07.2023

Das Bild ist in einer "Div" Box und diese hat eine "fieldset", ich erwähne das, falls es einen Unterschied macht.
Gute weiter im Text, jetzt hängt es etwa oben oder unten, kommt ganz darauf an, wo ich es in den "div Bereich" setze,
Was ich jetzt aber nicht umgesetzt bekomme ist, dass mein Bild im Hintergrund bleibt und bis zu Rahmen alles aus fühlt und den Text + links oben aufliegt,
also anstatt der Farbe ein Foto.

Was ich glaube, ist, dass die Skalierung in dem Fall nicht richtig, oder gänzlich falsch ist und oder es ein Problem ist, wo ich noch kein Wissen zu habe.

HTML


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

<head>
<div>
<meta charset="UTF-8" />
<title>Webentwickler-Befehle-Archiv</title>
<link rel="stylesheet" href="CSS\unterbefehle.css">
<meta name="description" content="HTML Befehle und eine Logische Dastellung der Anwendung">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">
<style>

</style>
</div>
</head>

<body style="height: auto; width: auto;">
<div class="four">
<a href="..\Hauptseite.html" class="Homepage"><p>Homepage</p></a>
<a href="..\Impressum.html" class="Impressum"><p>Impressum</p></a>
</div>
<div>
<h1 class="HAP"><u>HTML Übungsseiten</u></h1>
<br>
Dieser Text dient als Übungstext und kann gegen einen passenden Text ausgetauscht werden.
<br>Die Übung dient dazu, die <b style="background-color: aquamarine;">HTML-Techniken</b> zu trainieren, um sich auf eine Online Kurz für ein Webentwickler vorzubereiten.
<hr>
<h2> Die wichtigsten Sprachen, die man kennen muss, im Überblick.</h2>
<br>

</div>
<div class="imgage-box">

<fieldset style="width: 100px;border: 4px solid black;"><u><b>Grundbefehle</b></u>
<img src="Helton-stoff.jpg">
<legend class="RahmenÜberschrieft" ><b><u>Webentwicklung</u></b></legend>

<ul>

<li class="li-01"><a class="list-web-homepage"href="https://lerneprogrammieren.de/uebersicht-ueber-die-programmiersprachen/" title="Die wichtigsten Programmiersprachen.">Lerneprogrammieren</a></li>
<br>
<li><a class="list-web-homepage"href="file:///H:/HTML/Webseiten_Aufbaue/HTML%20Befehle&Anwendung.html" title="Eigens erstellte Liste an Befehelen">HTML Befehle</a></li>

<a class="t-for" href='https://fonts.google.com/' title="Schriftarten aus aller Welt.">Fonts.google</a><br>
<a class="t-for" href="https://pixabay.com/" title="Kostenlose Bilder, für eine freie Nutzung.">Pixabay</a><br>
<a class="t-for" href="https://www.w3schools.com/" title="Mehr Wissen zum Programmieren.">Color Picker</a><br>
</ul>


<ul>
<a class="list-web-homepage" href=""><li><p >CSS</p></a></li></li>

<a class="list-web-homepage" href=""><li><p >PHP</p></a></li>

<a class="list-web-homepage"href=""><li><p >JavaScript</p></a></li>
</ul>

</fieldset>

</div>
<div>
<fieldset style="width: 100px; border: 4px solid black;">
<legend class="RahmenÜberschrieft"><b><u>Medien</u></b></legend>
<a class="list-web-homepage" href="http://www.google.com">Google</a>
<br>
<a class="list-web-homepage" href="https://www.youtube.com">Youtube</a>
</fieldset>
<br>
</div>


<div>
<form action="" method="post">
<fieldset style="width: 190px;border: 4px solid black; ">
<legend class="RahmenÜberschrieft"><b><u>Login und Regestrierung</u></b></legend>
<label for="Benutzername"><p><b>Benutzername:</b></label>
<input id="Benutzername" name="Benutzername" type="Text">
<br>
<label for="Vornamen"><b>Vornamen:</b></label>
<input id="Vornamen" namen="Vornamen" type="text">
<br>
<labe for="Nachnamen"><b>Nachnamen:</b></labe>
<input id="Nachnamen" namen="Nachname" type="Text">
<br>
<label for="Mann">Männlich:</label>
<input type="radio" name="geschlecht" id="Mann">
<label for="Frau">Weiblich:</label>
<input type="radio" name="geschlecht" id="Frau">
<label for="Divers">Divers:</label>
<input type="radio" name="geschlecht" id="Divers">
<br>
<label for="Email"><b>Email:</b></label>
<input id="Email" name="Email" type="email">
<br>
<labe for="Password"><b>Passwort:</b></labe>
<input id="Password" name="Password" type="password">
<br>
</fieldset>
<br>
<input type="submit" value="Registrieren" class="button01">
<input type="reset" class="button01">
<br><br>
</form>
</div>

</body>
</html>

CSS
.HAP {
background-color: rgba(38, 9, 86, 0.5);
color: black
}
.RahmenÜberschrieft {
background-color: rgba(179, 110, 26, 0.5);
color: black
}
* {
padding: 1;
margin: 1;
}
html {
height: 100%;
}
.button01 {
background-color: bisque;
}
.button01 {
color: rgb(170, 4, 4);
font-size: 15px;
}
body {
background-image: linear-gradient(to right, rgba(28, 115, 202, 0.472), rgba(152, 25, 211, 0.438));
background-attachment: fixed;
font-family: 'Roboto Slab', serif;
background-color: #f5e2e2;
height: 100%;
height: 10000px
}

.fixed-box {
width: 120px;
height: 65px;
background-color: rgb(255, 255, 255);
color: white;
position: fixed;
top: 100px;
right: 50px;
padding-left: 10px;
padding-top: 5px;
/* Ändern Sie den Wert je nach gewünschtem Abstand */

}

.t-for {
color: black;
font-size: 16px;
text-decoration: none;

}

.list-web-homepage {
color: black;
font-size: 16px;
text-decoration: none;
}

.Impressum {
color: black;
font-size: 16px;
text-decoration: none;
position: fixed;
top: 66px;
right: 80px;
font-family: Arial, Helvetica, sans-serif;
}
.Homepage {
color: black;
font-size: 16px;
text-decoration: none;
position: fixed;
top: 39px;
right: 80px;
font-family: Arial, Helvetica, sans-serif;
}
.four {
border: 1em ridge rgba(184, 181, 181, 0.678);
border-radius: 15%;
}
.four {
right: 10px;
/*Ausrichtungs angabe, der Figuren auf einer Seite*/
width: 10em;
/*Größe der Figur(breite)*/
height: 3em;
/*größe der Figur(höhe)*/
margin: 1em;
/* Abstand zwischen den Figuren*/
background-color: bisque;
/*Oberfläcen Grundfarbe*/
text-align: center;
/*Ausrichtung des Textes innehalb der Figur*/
position: fixed;
}

.image-box {
position: relative;
width: 800px;
/* Oder eine andere gewünschte Breite für die Box */
height: 600px;
/* Oder eine andere gewünschte Höhe für die Box */
color: white;
/* Textfarbe, um den Text besser sichtbar zu machen */
padding: 20px;
/* Optional: Fügt Innenabstand zur Box hinzu */
border: 4px solid black;
/* Rahmen für die image-box */
}
fieldset {
border: none;
/* Optional: Entfernt den Standardrahmen des <fieldset>-Elements */
padding: 0;
/* Optional: Entfernt den Standardinnenabstand des <fieldset>-Elements */
}
fieldset img {
width: 100%;
/* Das Bild wird auf die volle Breite des fieldset angepasst */
height: auto;
/* Das Bild passt seine Höhe automatisch an, um das Seitenverhältnis zu bewahren */
display: block;
/* Optionale Anpassung der Anzeige für das Bild */
}

scatello · 26.07.2023

Wenn du das Bild als Hintergrund haben willst, dann musst du das auch per CSS als background-image definieren.

Und noch ein Tipp: google-Fonts vom google-Server einzubinden ist eine ganz schlechte Idee. Damit bekommst du u.U. Ärger mit der DSGVO und läufst Gefahr, abgemahnt zu werden. Binde die Fonts lokal ein, mit google findest du Hinweise wie man das macht.

Neveles90 · 26.07.2023

Danke, für den Hinweis im bezug auf Google.

Kennst du eine praktische Umsetzung, denn wenn ich diesen Befehl nutzen möchte geht das nicht, und wenn ich es definieren möchte geht es nicht, gut bei meinen jetzigen Stand ist das nicht so schlimm, würde nur gerne wissen wo dran dass liegt. Vielleicht kennst du eine gute Seite denn in mein Buch wird das nur schwach Thematisiert.

Danke.

scatello · 26.07.2023

Siehe https://www.w3schools.com/cssref/pr_background-image.php