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!

3 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

timlg07

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programmieren & Softwareentwicklung

04.08.2024, 11:14

Gib dem Bild (also dem img-Element) die folgende CSS Eigenschaft:

object-fit: cover;

Damit füllt das Bild die von dir vorgegebenen Maße aus, wird dafür aber zugeschnitten statt gestaucht.

Woher ich das weiß:Berufserfahrung

HoiZusammen

04.08.2024, 09:13

Wie hast du das Bild eingebunden?

A) als Hintergrundbild
B) als eigenes Bild?

michifrog

Beitragsersteller

04.08.2024, 09:20

ich glaub als eigenes Bild, hab das mit dem IMG Tag eingebunden :

und dass bei css:

.Hintergrund {

position: absolute;

z-index: 1;

width: 80%;

height: 83.2%;

margin-left: auto;

margin-right: auto;

background: linear-gradient(100deg, var(--background)30%, transparent);

}

TheXAI

04.08.2024, 09:57

body {

background-image: url('img_girl.jpg');

background-repeat: no-repeat;

background-attachment: fixed;

background-size: cover;

}

Mehr ist das tatsächlich nicht.
Also um deine Frage konkret zu beantworten warum das verzerrt wird liegt am Img Tag, genauer am css. Das Styling sorgt halt durch die Prozent Angabe der Größe dafür das, jetzt das Bild responsive ist.
https://www.w3schools.com/html/html_images_background.asp

Woher ich das weiß:Berufserfahrung – Entwickler mit Leib und Seele

timlg07

04.08.2024, 11:15

OP verwendet ein img-Element, kein background-image. Da wird das nichts helfen.

Ähnliche Beiträge

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

Hintergrund HTML, CSS Bild?

Hallo zusammen,

ich will das auf meiner Webseite auf der rechten hälfte das Bild ist und auf der linken Seite eine Farbe z.B. Grau, wie kann ich's machen dass sich das rechte bild sich dann zur mitte in die Hintergrundfarbe verläuft?

Danke!

...zum Beitrag

Wasserzeichen CSS HTML?

Hallo,

Ich würde gerne in HTML und CSS ein wasserzeichen machen, wie geht das?

Das Wasserzeichen soll im hintergrund von einem Text sein, falls ihr versteht was ich meine.

...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

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

Bild als Hintergrund Bild in Website einbinden (HTML , CSS )?

Hallo,

Ich Programmiere gerade eine Website in Visual Studio Code und will hinter den Buttons(siehe Bild 2) ein Bild als Hintergrund haben. Nun habe ich das ganze so programmiert (siehe Bild 1) und auch das Bild in die Website Datei eingefügt und alles gemacht. Dennoch sieht das ganze wenn man den liveserver öffnet, so (siehe Bild 2 ) aus und es ist anstatt dem Foto nur das Foto jpg Symbol klein zu sehen . Wie kann ich das ändern so das ich das Bild sehen?

Vielen Dank

...zum Beitrag

HTML/CSS Steam Website rebuild?

Hallo,

ich möchte gerne die aktuelle Webseite von Steam nachbauen, jedoch habe ich Schwierigkeiten mit dem Hintergrund der Seite. Obwohl die Pixel-Art am Anfang vorhanden ist, fehlt mir der untere Teil der Seite, insbesondere die Darstellung der Steine und Fische. Es wäre am besten, wenn ihr selbst auf die Seite geht, um mich besser zu verstehen.

Ich benötige das zweite Bild von der Seite, das als Hintergrund verwendet wird. Ich habe bereits versucht, es über den Source Code zu finden, war aber leider nicht erfolgreich. Ich zeige euch ein Bild, das ich bereits habe, und benötige lediglich den unteren Teil davon, den ihr auf der Steam-Seite sehen könnt. Dort werden Fische und Steine abgebildet.

Vielen Dank für eure Unterstützung!

...zum Beitrag

CSS header nimmt nicht volle breite?

Hallo,

Also ich hab einen Header erstellt, mit folgendem HTML Code:

<header>
    <p>Jetzt auch mit KLARNA zahlen!</p>
</header>

CSS Code:

 header {
    display: flex;
    justify-content: center;
    color: white;
    align-items: center;
    background-color: rgb(102, 102, 102);
    height: 40px;
    margin: 0;
    padding: 0;
    width: 100%;
}

Aber wenn ich nun mir mal per Untersuchen, die Webseite anschaue:

Dann sieht man, dass der header ab einem gewissen zeit punkt nicht mehr die volle breite nimmt. Warum?

...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

HTML und CSS - Wie kann ich bei meinem HTML-code Bilder in der CSS-Datei so skalieren, dass sie innerhalb eines Containers immer die volle Breite haben?

Hallöchen, ich bin noch relativ unerfahren und arbeite gerade an einem HTML-Code, in dem es mehrere nebeneinander liegende Felder geben soll. Das hat auch alles bisher gut geklappt, allerdings gehört zu jedem Kasten auch ein Bild, dass sich an die Containergröße anpassen soll. mit dem Code:

hat das auch geklappt, gibt aber bei der Prozentangabe hinter dem width eine Fehlermeldung wenn man das durch den Validator schickt. Kann mir jemand sagen wie ich den gleichen Effekt erzielen kann und dabei in der CSS Datei arbeiten?

 img {
      width: 100%;
      height: auto;
      }

Das hat nähmlich leider nicht geklappt...

Danke im vorraus!

...zum Beitrag

Unterschied von html und body im CSS?

Hey, wo liegt denn der Unterschied, wenn man CSS für Body { ... } und HTML { ... } angibt? I.d.R. schreibt man dort ja Angaben zur Breite, Schriftart ect.

...zum Beitrag

Kann man den css - style auch im <body> - Bereich einfügen?

Guten Abend liebe Community,

ich programmiere momentan mit html/Css; so viel wie ich gelernt habe, kommt der Css-Style im head - Bereich, da dies Funktionen sind, die der Besucher einer Webseite nicht zu sehen braucht (er sieht ja sozusagen das Ergebnis später auf der Webseite).

Nun ist meine Frage: gibt es eine Möglichkeit den css-Style auch im body-Bereich einzufügen und wenn ja, wie ?

...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

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?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen