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

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

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

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

Warum verschiebt <!Doctype html> meine img's?

Wenn ich meine HTML- Seite erstelle, dann passen die Bilder, doch wenn ich <!Doctype html> in meinen Code mit aufnehme, dann verschieben sich alle img-Tags um 5px nach oben.

...zum Beitrag

WordPress mit eigenem HTML, CSS und JSCode?

Hallo Leute, ich brauche mal ein paar Infos zu WordPress in Verbindung mit eigenem HTML, CSS und JavaScript Code.

1.) Ich habe mit den 3 besagten Sprachen ein kleines interaktives Bild in einer HTML Datei erstellt mit einem Umfang von gut 180 Zeilen und dieses Bild würde ich gerne in WordPress einbinden, funktioniert das? Wenn ja wie? Per Shortcode? Direkt einbinden? muss ich das in ein Plugin umwandeln?

2.) Wenn es möglich ist, kann ich das Erstellte leicht exportieren und auf einer anderen WordPress Seite ebenfalls leicht Importieren?

3.) Kann ich überhaupt mit der kostenlosen Version bzw. mit der Persönlichen oder maximal Premium Version besagtes umsetzen? Oder müsste ich für eigenen Code ein höheren Tarif wählen?

Vielen dank schonmal und Beste Grüße!

...zum Beitrag

HTML / CSS: Wie kann ich einen Text horizontal zentrieren?

Wie kann ich einen Text in die Mitte bringen?

So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      body {
        background-image: url("bild.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        overflow: hidden;
      }

      h1 {
        color: white;
        font-family: Geneva, Verdana, sans-serif;
        font-size: 200px;
        text-align: center;
        /*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
        padding-top: 38vh;       
        padding-bottom: 70vh;
      }

      h1 {
        /*animation-name: titel;
        animation-duration: 6s;
        animation-delay: 6s;
        animation-fill-mode: forwards;*/
        animation: titel 6s 6s forwards
      }

      @keyframes titel {
        from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
        to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
      }

      p {
        color: aliceblue
      }
    </style>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>TITEL</h1>
    <p>Test-Text</p>
  </body>
</html>

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

Border-Radius in Tabellen ohne CSS?

Hi zusammen,

die Frage ist mir zwar etwas peinlich, aber ich bekomme es nicht gelöst und brauche mal eure Hilfe.

Weiß jemand wir man die Ecken einer Tabelle abgerundet bekommt, ohne dafür css zu verwenden?

Ich habe nämlich folgendes Problem:

Ich versuche, ein neues Email-Template zu bauen. Leider werden je nach E-Mailprogramm einige CSS Befehle nicht erkannt (Outlook). Da ich nicht mit Bildern arbeiten möchte, suche ich hierzu eine „reine HTML-Lösung“.

oder:

Wenn jemand, weiß wie man Outlook dazu bringen kann auf Border-Radius (css) zu reagieren, nehme ich auch gerne jeden anderen Vorschlag an ^^

Lieben Dank schon mal 😊

<table class="emailTable">
    <tr class="firstTR">
        <td>1</td>
        <td>2</td>
     </tr>
</table>

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

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

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

HTML / CSS: Mein div wird oben abgeschnitten?

https://jsfiddle.net/qkw45jne/1/

Wenn der Bildschirm zu klein wird (in der Höhe), wird das rote div oben teilweise abgeschnitten. Scrollbars kommen aber trotzdem, da die teile drunter vollständig zu sehen bleiben.

Was muss ich ändern, dass auch das rote div immer vollständig da bleibt?

In dem jsfiddle könnt ihr das recht einfach nachstellen, indem ihr die mittlere grenze hoch schiebt. Dann wird irgendwann auch der text im roten div sichtbar:

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen