Html: bild im Hintergrund?

Hii, also ich brauch Hilfe mit HTML (nur HTML und nicht CSS).

Ich will ein Bild einfügen, will aber nicht, dass es im Text steht sondern quasi hinter dem Text.

Wenn es im Text steht, verschiebt sich immer alles und es ist ein riesen Abstand zwischen den Zeilen, genau das will ich vermeiden.

Kann mir jemand weiter helfen?

26.05.2024, 20:17

!Ich will kein ganzes Hintergrundbild, sondern nur so ein kleineres Bild an einer stelle

1 Antwort

Von Experte medmonk bestätigt

Mirko Marek

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Mediengestalter Digital und Print

26.05.2024, 19:12

Hi 1chbinnichtdu,

das was du gerne haben möchtest, geht nur mit CSS. Zumindest wenn es um den HTML5-Standard geht. Wenn du jetzt für ein Element, Elternelement oder für die ganze Seite ein Hintergrundbild haben möchtest, benötigst du folgenden CSS-Code:

.meinElement {
  backgound-image: url("../images/meinBild.jpg");
}

Für den ganzen body kannst du das auch verwenden:

body {
  background-image: url("../images/meinBild.jpg");
}

Weiter Infos zum Thema Hintergrundgrafiken hinzufügen findest du auch im Wiki von Selfhtml unter: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Hintergrund/Gestaltung_mit_CSS

oder ein Tutorial für CSS unter:

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg

Viel Erfolg

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

Ähnliche Beiträge

HTML/ Kann man nur in HTML eine Sternebewertung einfügen?

Also nur HTML (nicht CSS)

...zum Beitrag

Css+html Navbar verschoben?

Hallo :)

Ich baue mir gerade eine Website auf und habe ein Burger-menü in Css und Html angelegt, allerdings ist der Navigationsbereich nicht unter dem Icon sondern verschoben darüber, wodurch das Menü nicht gut aufklappbar ist.

In Css habe ich bereits versucht durch nav{...} den Bereich von Html anzupassen (auch mit dem Boxenmodell) aber ich kenne auch noch keinen Befehl der das verschiebt, oder es funktioniert einfach nicht.

Ich wäre auf jeden Fall sehr dankbar für Hilfe!

LG Sabine

...zum Beitrag

Schnell Geld mit Html und Css?

Hallo ich habe gute Html und css kenntnisse ich muss schnell an geld kommen was würdet ihr mir empfehlen ich rede nicht von tausenden euros sondern ein bisschen

...zum Beitrag

Transparente bilder in html css einfügen?

hallo wie kann ich diese Bild in html einfügen so das man die Kästchen nicht mehr sieht so das es transparent wird

...zum Beitrag

Frage zu CSS: Bild in einem Element strecken?

Hii,

bin gerade dabei mit vanilla js, css, html ein game zu entwickeln. So sieht es bis jetzt aus:

Wie kann ich machen, dass das Bild nach unten im Element gestreckt wird, statt doppelt gezeichnet. Mein css (unfertig) sieht so aus:

Mfg Weißbrot

...zum Beitrag

Hintergrundbild in HTML anpassen?

Hab neu mit HTML und css angefangen...

Ich möchte zum Anfang als Startprojekt sowas wie einen Lebenslauf gestalten und will eben ein bestimmtes Bild als Hintergrundbild.

background-image: url('thumb2-flag-of-bern-4k-swiss-canton-silk-flag-silk-texture.jpg');
background-repeat: no-repeat;

so steht es in meiner CSS, das passt auch nur ist es nur auf dem Viertel des Bildschirms. Was muss ich noch dazuschreiben damit es 1. nur ein Bild ist und nicht wiederholt wird und es sich an die Tabgröße anpasst?

...zum Beitrag

"E-Mail Icon" auf der Website?

Ich lerne gerade, wie ich mit Html, Css und JavaScript eine funktionierende Website erstelle. Jetzt frage ich mich aber, wie ich es schaffen kann, ein rundes Icon mit den Anfangsbuchstaben der E-Mail oder wie auf dem Bild mit einem Hintergrund (meinem Google-Hintergrund) hinzuzufügen.

Welche Programmiersprachen benötige ich dazu, was muss ich ungefähr machen oder gibt es gute Videos, die ich mir dafür angucken kann?

Bei meiner eigenen Recherche konnte ich leider nur Tutorials darüber entdecken, wie man sein Google-Hintergrundbild ändert.

Danke für alle Antworten!

...zum Beitrag

CSS Abstand um das Element entfernen?

Hallo,

Also ich wollte ein header erstellen, der in html so aussieht:

<div class="versand">
    <p>Versand ab 59€ Frei</p>
</div>

Nun hab ich ihm, folgende css eigenschaften gegeben:

.versand {
    color: white;
    text-align: center;
    background-color: black;
    width: 100%;
    height: 50px;
}

Warum ist jetzt ganz oben immer noch ein Abstand über dem Element?

...zum Beitrag

Stichpunkte mit Html bearbeiten?

Hii ich versuch gerade html zu lernen und will listen machen.

So sieht die Website gerade aus:

Ich möchte das der text von den verschiedenen Stichpunkten verschiedene farben hat also, dass Katze: Lila Hund:Pink Otter:blau. Außerdem möchte ich das die herzen for den Stichpunkten Pfoten sind.

Das ist mein Code:

Wie muss ich den abändern damit das funktioniert?

(Außerdem funktioniert meine Css Datei nicht wäre nett wenn mir da auch wer weiterhelfen könnte)

...zum Beitrag

HTML Tag als Text darstellen?

Hallo. Ich möchte den Tag <h1> nicht als Tag darstellen, sondern als Text. Wie geht das und macht man das in HTML selber oder in CSS?

Hintergrund: Ich versuche gerade eine Seite zu schreiben, wo HTML erklärt wird. Dort gibt es dann einen Satz bzw. Absatz, der wie folgt lautet:

"Die Sprache HTML beschreibt, wie der Browser (oder ein anderes Programm, wie z. B. ein Text-Editor) die Auszeichnungen des Textes zu „verstehen“ hat, nicht, wie er sie dann in der Darstellung umsetzt. So besagt <h1> zwar, dass eine Überschrift folgt, nicht aber, in welcher Schriftgröße oder Schriftschnitt diese darzustellen ist – hier haben sich nur gewisse übliche Standardeinstellungen eingebürgert, die aber nicht Teil der HTML-Spezifikation sind."

Das Problem ist nun, dass im zweiten Satz ab <h1> alles danach als Überschrift groß und fett geschrieben wird (und in einer neuen Zeile), weil er das alles, was danach folgt, als "Überschrift" kennzeichnet bzw. tagt. Das will ich aber nicht. Ich will, dass es als normaler Text dargestellt wird und alles danach auch. Wie genau mache ich das?

...zum Beitrag

Wie kann ich machen dass sich das Hintergrund Bild nicht verzerrt (HTML CSS)?

Hallo zusammen wie ihr auf dem Video sehen könnt verzerrt sich da das Hintergrund Bild. Ich möchte aber dass wenn die breite des Bildschirms breiter oder schmaler wird, dass sich das Bild sozusagen nach Links verschiebt und sich nicht verzerrt.

Hoffe ihr versteht was ich meine 😁

https://www.youtube.com/watch?v=NEBd6TEeuqM

Vielen Dank im voraus!

...zum Beitrag

Wie kann ich den Abstand zwischen HTML-Tags entfernen?

HI, ich programmiere gerade einen Taschenrechner in HTML/CSS/JavaScript und möchte den Abstand zwischen den Elementen entfernen. Margin, Padding und Border sind bereits auf 0 gestellt. Der Abstand ist auch nur horizontal zwischen den Elementen. Vielen Dank im Voraus :-)

...zum Beitrag

HTML/CSS: Wie kann ich den Text neben dem zweiten Symbol zentrieren?

Hallo,

ich brauche Hilfe. Ich möchte den Text „Announcements“ so verschieben, dass es neben dem zweiten Symbol zentriert ist (siehe erster Text „My courses“).

Dankeschön.

Es wäre nett, wenn ihr antworten würdet.

...zum Beitrag

Html und Css; Wieso wird der Text am Ende als Link dargestellt?

Hallo,

es geht um folgenden Code:

<!doctype html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="widt=device-width, initale-scale=1">
        <meta name="description" content="Beschreibung">
        <title>Test html Grundgeruest</title>
    </head>
    <body>
    </body>
</html>

</br>
</br>
</br>

ERSTELLUNG EINES LINKS</br>
<a href="irgendwohin.html">Hier Klicken</a>
Nach "href=" steht die Datei, die aufgerufen werden soll, diese muss in Gänsefüsschen stehen.</br>
"Hier Klicken" ist der für den Benutzer sichtbare Text, der angeklickt </br>
werden soll. Achtung Attribute wie href stehen immer nur im Start-Tag, nie im End-Tag.</br>
</br>
</br>
</br>

EINFÜGEN VON BILDERN</br>
<img src="https://localhost/Schulung_Html_und_Css/Html/Vorgang_02_HTML_Grundgeruest/Bilder/test.jpeg" alt="kurzbeschreibung" width="50px" height="50px">
</br>
</br>



    <!--
    - Beachte dass das Bild im selben Ordner liegen muss oder ein eindeutiger Link erzeugt werden muss.
    Wobei darauf zu achten ist, in welche die "/" schauen.
    -->
</br>
</br>
</br>
</br>



<p> Hier kann ein Text dargestellt werden </P>
<p> Hier kann ein weiterer Text dargestellt werden </p>
    <!--
    - Hat den Vorteil dass mit einem Stylesheet alle mit <p> gekennzeichneten "Container" mit einer Eingabe oder Umstellung Formatiert werden können.
    -->



<ul>
    <li><a href="https://www.google.com/">Google</></li>
    <li><a href="https://www.youtube.com/">Youtube</></li>
    <li><a href="https://www.bing.com/">Bing</></li>
    <li><a href="https://www.y-informer.com">y-informer.com</></li>
</ul>    

</br>
</br>
</br>

<p> Dies ist die Xampp installation</p>


    <!-- so wird ein Kommentar eingefügt. Dieser ist für den Besucher der Webseite nicht lesbar.
        Innerhalb des kommentars können auch html Befehle  eingegeben werden. Diese sollen zumindest
        keine auswirkungen auf die Eingabe haben.
        
        - Fehler der mir unterlaufen ist. Beim Einfügen von Bildern, sofern dieser im selben Ordner liegt muss hinter dem
        <img src noch ein "=" Zeichen. Wenn das Bild in einem leserlichen Format ist klappt es.
        -- Sofern das Bild an einem anderen Ort liegt, klappt es aber nicht, an der Lösung wird noch gearbeitet.
        
        Beachte:
        - Dateifadsangaben im internet -> "/"
        - Dateifadsangaben im Betriebssystem -> "\"
        - Die Angabe "localhost" beinhaltet bereits die "htdocs" entsprehcend ist im weiteren nur noch der Projektordner anzugeben.
        
        Merke: bei dem eigentlichen Turtorial:
        - Die Xamp Installation und Konfiguration durchgehen
        - kurze einführung wie das funktioniert mit dem Webspace -> PC -> Server -> Webspace -> Domain und so weiter.
        
    -->

Wenn ich mir den Code im Browser ansehe wird der Teil unten:


<p> Dies ist die Xampp installation</p>

als Link dargestellt wieso ist das so?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen