welche möglichkeiten gibt es ein bild in eine webseite zu implementieren?

gibt einige aber kenne nur wenige

10.08.2024, 21:57

Also alle nennen die ihr so kennt wären hilfreich

4 Antworten

Xearox

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

10.08.2024, 23:02

.background-image {
    background-image: url('pfad/zum/bild.jpg');
    background-size: cover;
    background-position: center;
}

<div class="background-image"></div>

oder als SVG

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Als DATA URL

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Beispielbild">

Als Canvas

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var img = new Image();
    img.onload = function() {
        context.drawImage(img, 0, 0);
    };
    img.src = 'pfad/zum/bild.jpg';
</script>

via JavaScript

<div id="imageContainer"></div>
<script>
    var img = document.createElement('img');
    img.src = 'pfad/zum/bild.jpg';
    document.getElementById('imageContainer').appendChild(img);
</script>

Als Pseudo Element in CSS

.image::before {
    content: url('pfad/zum/bild.jpg');
}

oder eben direkt als html

<body background="pfad/zum/bild.jpg">

<object data="pfad/zum/bild.jpg" type="image/jpeg">
    Alternativtext für Browser, die das Bild nicht anzeigen können.
</object>

<embed src="pfad/zum/bild.jpg" type="image/jpeg">

<figure>
    <img src="pfad/zum/bild.jpg" alt="Beschreibung des Bildes">
    <figcaption>Bildunterschrift für das Bild</figcaption>
</figure>

<a href="pfad/zum/großen-bild.jpg">
    <img src="pfad/zum/thumbnail.jpg" alt="Thumbnail Bild">
</a>

Holzbiene2024

10.08.2024, 23:34

Normal ist es, ein Bild zu laden <img src="..."

Du kannst es auch per base64-Code in die HTML Datei einfügen. Kopiere diesen Code in eine HTML-Datei (ich hoffe, GF zerschlägt NICHT die Zeilenumbrüche):

<h1><img src=
"data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAADAAAAAnCAYAAABJ0cukAAAABHNCSVQICAgIfAhkiAAAABl0
RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAqdEVYdENyZWF0aW9uIFRpbWUA
U2EgMTAgQXVnIDIwMjQgMjM6MTM6MDAgQ0VTVGtu9UwAAAX/SURBVFiF7VlrbJNVGH7Wy761
37pLL9u6i+zW7pLBAIHMAINMoShqAoZEo8GQoIkxMRpiDGAworKAAbzEkIj8McFfRDBIIhtj
6NiAuCBjGYNu3daO3UovX9v1vrb+GCucfl/br4OAS3z+nXPec9736Xfe22laJBKJYAFD8LQN
eFSInpZiiycImycIQRqgkIqRKxHP65wnRsAfCuPSkA2dRgbdYw7WOiUSYEVRFtaVybFmUS7v
c9NS8QGbNwjzdADhSARKOh15dDqvfW0GK37qvguHb4aXfBYlwmt1+dhWV5BUNimBTiODv0Zs
+GfcielAiFjLEAmwoVKBV2vyUZRFsfY6/DM4+OcQbky4eBkei4aSHHzSWAZKFN9V4xLoHnPi
h6tGTE0HeCnbUpuP7csLQQlnlRkZH/a26GHzBudh+gPUqGjs36ABLRZyrnMSONkzgZM3xlNW
plFIsX+DBtmUCG0GKw5fHmHJ1ObR2KhRQauUQi2j4AmEcNfph4nx4oqJwfVxJ2tPvVqG5o1a
fgRaBq34ppOtmC+qlDSObq4GAHzZbkCXiQEAZFMi7FpbhhVFWQn3Xx1lcOzaKO65yS+/49ki
Tp8gCBgZH977rY8lVCijoNMqUa3KRIVcAsY3A4PVg+4xB1oHrSz5OWWMbwY7TvVCSYtxaFMV
71A54fLjg9/74X7I58TCNBzfUscKHASBD8/1Q2/xEAJbavPxzsriuMpGGC/2tQ7A4nlw1zNE
Avy8bQky04U4d+ceVhVnQ8UzYs3hxoQLe1r0xNzmKhXeb3iGmIu69y2zm2V8Y2luQuMBoDRH
gs+eryTmfDNhnLk1FVWaqvEAsFQtQ0NJDjHXPmRjyUUJdJns5EIa8O6qEl7KKuRSvFCpIOYu
GNhXK1W8vkRNjD3BEHqnpom5KIFhm5dYWL0oF/IU0vvLVXnE2DwdYDliqtAqpcjJIIuFAYub
GEcJjLt8xEKVkk5ZWSwelQAAlGRnJDwzSiAQItOBWJh6oZqXSd71x0FALSMzvNNPliNRK7Mo
MtM5fKlnUIeXPJxO586eqSC2fJFR5JWKEijMIj9Vn5l0lmSweILwh8LEnHIe0ScW+pg7r5CS
fhklsLhARiz0TLgwYicdOxE6jXbWXEEmu8BLBYNWD5FfAKBalUmMowS4avBDHcMs34iHC4MW
YrxULUNGgiqSD072kPUYJRRgcX4cAkqpmEVixO7F7vN3kjpjl4mBISYMry2Vz8voOXSM2HFt
lGx81pWzzyR+op0ri1m1d/89N94+1YuvO4bRPebEzUkXbk66cPv+3XQHQzjRfZfYQwkFWL1o
Not+d8XIihzJ0Ds1jSMcBSVXMUe4dB6djl1rSnHg0hBLsH3IRqRyuUSM41vrsLdFjwmXn5Dd
vrwQWZQINm8Qf+gtCIYi2LWmNKnhnmAYv/ZN4peeCbbxiws4mybOfqDTyODI5WF4Z8KsDXOQ
iATIlYgxHmN8hVyK71+pAQB822XE+YFZ39izvpzTz6yeIPRWNzqG7eg02RHk8LkaFY3DL1Vz
2hG3IzO7Azh6eQQ9k/zbwWxKhMObq1Eoo3DFxOCLdgOx3qzTor5AhjsWNz46d5vXmVVKGl9t
1EAapyOLGyby6HQ067TYva4cmzRKlOZIEiqSioVo1mlReD9zjjp8LJnP2wZxfdwJQVoaL+Ob
yuU4oNPGNR5I4VWiddCKo3E6NaVUjH1NlahUkPXQp60DnC1iU7kcFzlK4zmoZRR2rizGczHl
NBd4vwvF47mqOBsfN5ZxNt2715djz3k9Bqxkn8FlvFwiRm1eJhqeyUETR7iMh3k/bFUqpHij
Xp3wV6LFQhzQabH/ogG9SXzpxNa6hM8n8cCfwP1721iWixc1KtSrZUk2zIIWC3FQp8WPf4/i
zC1zgvN5W0Ju4+sDdt8MEInM+w0TmH2hO3bNBE+QHZ5Pv7Us+qaUClJ6Wnwc8ATDOHvbjDN9
U3A8lKFPv7lsXlfoiROYgz8URpvBirP9ZhgZ38L5Alww2LyokCfOM/HwnyDwKFjw/9D8T+Bp
Y8ET+Be2MU4c0u7jAAAAAABJRU5ErkJggg==" alt="GF" style="width:1.5em;height:1em" />
gutefrage</h1>

So einen Code bekommst du, wenn du ein Bild in den Text einer E-Mail einfügst, die Mail an dich selbst sendest und den Mail-Code aufrufst.

hamberlona

10.08.2024, 21:22

In HTML z.B. mit

Lebensoffen

Beitragsersteller

10.08.2024, 22:03

Welche Möglichkeiten gibt es noch

ByteMaster42

10.08.2024, 21:18

Einfach über HTML einbinden. Geht super easy: https://www.w3schools.com/html/html_images.asp

Woher ich das weiß:Hobby – seit 2020 Erfahrung mit PHP, Laravel, Vue sowie Javsscript

Ähnliche Beiträge

HTML in Webseite ändern und beibehalten?

Wie bleibt die Veränderte HTML auf einer Webseite gibt's da Möglichkeiten

...zum Beitrag

Timer auf Webseite (HTML)?

Wie kann ich in JTML einen Versteckten Tiger stellen, so dass einige Texte erst nach Ablauf des Timers (z.B. 10 sek.) Auftauchen. Der endbenutzer soll davon nichts sehen!

...zum Beitrag

Kostenlose Möglichkeit, einen Shop in HTML zu implementieren?

Hallo, ich habe vor, für mein Musiklabel (wirklich nur was kleines, also immer nur so 50-200 Pressungen eines Releases..), einen Shop zu haben. Ich bin bereits auf Bandcamp, aber die nehmen 10% von Verkäufen für sich selber.

Da ich eher ungerne auf sowas wie Bigcartel gehe, weil ich das nicht direkt auf meiner Websit haben kann, frage ich mich ob es eine gute aber primär Kostenlose Option gibt, wie man sowas auf eine Statische HTML Seite packen könnte.

Danke!

...zum Beitrag

Karussell für Kleidungsstücke?

Hey, ich will eine Webseite programmieren und ein Kleidungskarussell erstellen.

Im Grunde so wie in diesem Video

Wie kann ich so etwas programmieren mit php, css, js & html? Brauche ich dafür libs?

Die Bilder hätte ich bereits

...zum Beitrag

Beste AI zum Programmieren?

Hallo

Kennt von euch jemand eine AI welche gut zum Programmieren ist? Ich benötige eine AI welche mithilfe eines Bildes zb mit ein CSS code ausgeben kann mit welchem ich meine Webseite so gestalten kann sodass ws gleich wie auf dem Bild aussieht.

...zum Beitrag

HTML5 vs. HTMLx - Was ist jetzt besser zu lernen?

Hallo an Alle,

ich will versuchen, HTML 5 zu lernen und habe mir dafür einen dicken Wälzer (800 Seiten stark) gebraucht gekauft.
Jetzt meinte ein Bekannter (Fachinformatiker), dass HTML5 zu lernen sich nicht lohnt, weil es inzwischen eine neue HTML-Version geben soll, nämlich HTMLx, die für Webseiten gerade im Bezug auf Barrierearmut und Zugänglichkeit noch eine Spur geeigneter sein soll.

Lohnt es sich tatsächlich nicht, jetzt noch HTML5/CSS 3 zu lernen? Habe ich sozusagen aufs "falsche Pferd" gesetzt? Bisher finde ich jedoch im Netz nur wenig Info über die neue Version, und das Wenige ist zudem auf Englisch.

Weiß da jemand von Euch Genaueres?
Für die Antworten bedanke ich mich im Voraus.

GLG

Tichuspieler

...zum Beitrag

Webseite scrollen verhindern?

Hallo ich möchte auf meiner Webseite das Scrollen zur Seite auf dem Handy verhindern, die einzige Möglichkeit die ich gefunden habe hat leider auch die Schieberegler deaktiviert!

...zum Beitrag

Text aus anderem Dokument in HTML Webseite verknüpfen?

Angenommen, ich hätte 2 HTML Dokumente 1.HTML und 2.HTML und in beiden werden z.B. alle Windows Versionen aufgezählten. Jetzt kommt Windows 12 hinzu. In diesem fall muss ich jetzt überall Windows 12 Hinzufügen.

Gibt es die Möglichkeit eine Datei Windows Versionen.[Dateiformat] zu erstellen, in der die Aufzählung eingetragen ist, so dass ich in 1.HTML und 2.HTML den Link von Windows Versionen.[Dateiformat] einfüge, und beide automatisch auf die Datei zugreifen, wo die Liste drin ist, und die Daten anzeigen?

Geht dass?

Welche Programmiersprache muss ich verwenden?

Wie füge ich die Dateien in HTML ein?

Könnt ihr mir ein Beispiel zeigen?

...zum Beitrag

Website HTML und CSS Fehler?

Hallo,

ich soll als Hausaufgabe eine Website (nur HTML und CSS) programmieren (wir haben bis jetzt nur die Basics gemacht).

Ich habe nun die Grundstruktur in HTML so gemacht, wie ich es brauche und bin nun beim CSS Teil angekommen, welcher mir etwas Kopfschmerzen bereitet.

Ich habe mal Screenshots vom bisherigen Code eingefügt (Die Website soll laut Lehrer ganz einfach sein, das Impressum muss nur einen Beispieltext enthalten und den Code für den footer aus der Landingpage habe ich noch nicht an die anderen Seiten angepasst, da ich noch mit CSS am experimentieren war).

Falls der Code an sich besser weiterhilft, habe ich hier noch den Dropbox Link:
https://www.dropbox.com/scl/fi/fgwyg3w7m4hfqdnbl3f3n/Website.zip?rlkey=1ea3d4quzggbn8xgnk9x9gvk3&dl=0

Nun habe ich folgende Probleme/Dinge, die ich auf der Website haben möchte, aber nicht hinbekomme:

Ich möchte einen festen Header haben (wie der auf gutefrage), bei welchem die anderen Seiten mittig angeordnet sind
Der footer soll wie bei Amazon ganz unten sein und auch in einem farbigen Kasten, welcher sich über den ganzen Bildschirm zieht
Die Texte im Footer sollen einmal links(2023), mittig(impressum) und rechts(Namen) ausgerichtet sein (irgendwie konnte ich den Link zum Impressum nicht verschieben)
Die Seite muss nicht 100% responsible sein, sondern soll sich nur an verschiedene Browser anpassen (Laut Lehrer mit Hilfe von prozentualen Werten anstatt Pixeln)
Auf der Landingpage möchte ich das Hintergrundbild haben und der Text (welchen ich noch hinzufügen muss) soll erst nach dem Bild kommen, wenn man runter scrollt
Auf der Impressum Seite soll der Beispieltext zum Uhrheberrecht nicht von ganz links nach ganz rechts auf dem Bildschirm gehen, sondern nur bis zu etwa der Mitte und dann einen Zeilenumbruch (soll sich nicht verschieben, wenn ich es mit anderem Browser benutze)

Ich habe schon selbst versucht, die oben genannten Dinge irgendwie zu fixen, aber entweder klappt es nicht oder meine Website stellt sich einmal auf den Kopf. Da wir auch erst die Basics in CSS hatten, weiß ich leider nicht mehr, als das, was ich schon gemacht habe.

Es wäre sehr hilfreich, wenn mir einer, der sich damit auskennt, weiterhelfen könnte und mir erklären kann, wie ich die oben genannten Kriterien umsetzen kann.

Ich bedanke mich schonmal sehr bei euch.

Grüße Alex

...zum Beitrag

Kann man eine Webseite mit dem VS Code Live-Server irgendwie mit dem Handy testen?

Hallo,

ich bin gerade dabei, in VS Code meine Webseite für das Handy zu optimieren (CSS Media Queries). Ich hatte die ganze Zeit mit Netlify Drop einen 1-Stunden-Host gestartet und geschaut, wo ich noch optimieren muss. Leider habe ich logischerweise irgendwann das Limit erreicht.

Jetzt meine Frage:

Kann man die Webseite mit dem VS Live-Server irgendwie mit dem Handy testen?

Die Seite zuerst online stellen und dann optimieren ist natürlich keine Option. :) Wenn das nicht funktioniert, was habe ich noch für Möglichkeiten?

Danke schonmal!

...zum Beitrag

Hosting bei Auftragsprogrammierung von Webseiten?

Hallo,

ich spiele mit dem Gedanken überein Kleingewerbe oder Freelancertätigkeit Webseiten für Privat- oder Geschäftskunden zu programmieren.

Also das reine Frontend.

Wie läuft sowas in der Regel mit dem Hosting der Webseite.

Könnte ich verlangen, dass sich der Kunde selber um Domain, Webspace, Impressum , Darenschutz usw. (ggf. Backend) selber kümmert.

oder ist das direkt unprofessionell und von Erfolglosigkeit gekrönt?

Also weil der Kunde so gar keine Ahnung hat, ich aber ja nur 'ein wenig', weil ich ja hauptsächlich nur das Frontend bieten möchte? Aber er möchte vielleicht alles aus einer Hand, obwohl Frontend ja gar nichts unbedingt für Backend zuständig ist.

Ich meine, ich kenne ja die Grenzen und Zuständigkeiten unter Umständen besser als der Kunde, kann aber nur das bieten womit ich mich am besten auskenne.

Hoffe ihr versteht was ich meine😉

...zum Beitrag

Wie mache ich mein Figma Prototyp zu einer echten funktionierenden Webseite ohne Programmierkenntnisse?

Ich wollte gerne eine Webseite machen. Ich kenne mich mit Figma und Adobe Programmen gut aus und möchte sie selbst gestalten ohne „irgendeinige Vorlage webseite builders“ zu verwenden. Wie kann ich dies machen ohne Programmierkenntnisse zu haben? Ich möchte eine Art Portfolio Webseite machen mit einem Kontaktformular?

Nachdem ich meinen Klickdummy in Figma gemacht habe, was die echte Webseite sehr nah kommt, welche sind die nächsten Schritte?

Wie kann ich das Kontaktformular zu richtigen Eingabefeldern machen, die auch zu mir abgeschickt werden können?

Und wo sollte ich mir eine Domain kaufen? Was gibt es da zu berücksichtigen?

Gibt es irgendwie ein Programm oder Plugin, das ich verwenden kann, ohne etwas programmieren zu müssen. Wenn nicht, welche Programmiersprache könnte ich schnell lernen und dies da umsetzen?

...zum Beitrag

HTML & CSS in .exe umwandeln?

Hallo,

ich habe eine ganz einfache Webseite mit HTML und CSS gebaut. Dort gibt es Buttons, die zu unterschiedlichen Webseiten führen. So eine Art Favoriten Liste wie in Browsern.

Diese Webseite möchte ich gerne in eine .exe umwandeln. Dann kann der Anwender über ein Desktop Icon dieses "Programm" öffnen. Wenn man dann auf einen Button klickt öffnet sich ganz normal eine externe Browser Webseite. Habe das schon mit .hta probiert, aber dann werden einige CSS Befehle nicht übernommen und die Buttons funktionieren nicht. Würde auch gerne eine Installation ausführen lassen, so dass man dann danach eine .exe. Datei hat.

Kenne mich nur mit HTML und CSS aus. Alles Andere kann ich nicht.

Danke :)

...zum Beitrag

CSS: Wie kann ich Karten gleich groß anzeigen?

Guten Tag,

ich habe einen kleinen Design-Bug in meiner Webseite.

(s. Bild)

Wie kann ich dieses Problem lösen?

Mein CSS:

<style>
.item {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 10%;
  border-radius: 5px;
  background: #191c29;
  color: rgb(88 199 250 / 100%);
}
.con {
  background: #adadad;
  overflow: auto;
  overflow-x: hidden;
  background: #212534;
}

.item:hover {
  box-shadow: 0 16px 32px 0 rgba(250,250,250,0.2);
}
img {
  border-radius: 5px 5px 0 0;
  height: 150px;
	width: 100%;
}
.container {
  padding: 2px 16px;
}
body {
  overflow: hidden; 
}


* {box-sizing: border-box;}


body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}




* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
#flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.item {
  float: left;
 /* width: 25%; */
  width: 15%; /* 10%*/
  height: 50%; /* 50% */
  padding: 20 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.row {
  margin: 0 -5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col-sm {
  text-align: center;
}
/* @media screen and (max-width: 600px) { */
@media screen and (max-width: 800px) {
  .item {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.text-center {
  text-align: center;
}
</style>

Der Code von einer Karte:

<div class="row">
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
</div>

Danke für jede Hilfe. Ich weiß, dass der CSS-Code nicht der schönste ist, allerdings lerne ich die Sprache noch!

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen