Hilfe bei Bildskalierung mit CSS

[LittleBlondi]

Hallo Ihr Lieben,
ich benötige dringend Eure Hilfe.
Ich habe auf meiner Website oben ein Bild welches sich automatisch an die Website-Größe anpassen soll aber irgendwie stell ich mich dumm an.
Zudem soll das Bild immer zentriert sein. Ab einer gewissen Bildschirmgröße wechselt das Bild. Irgendwie funktioniert nichts so richtig.
Vielleicht sieht da jemand durch und kann mir helfen. Ich danke schon mal im Voraus.
Hier mal die Website: www.lebenslinie-praxis.de

diese css hab ich momentan in der main.css Datei:

/* Banner */

#banner-wrapper {
background: #c8d2bc url(images/bg1.png); --------> das ist das Bild was normal am PC geladen wird

padding: 10px 0;
max-width: 100%;
height: auto;
}

#banner {
box-shadow: inset 0 0 0 8px #fff;
padding: 1em 1em;
max-width: 100%;
height: auto;
background-image: url(images/Logo-Lebenslinie-klein.png); -------------> das ist dass Logo was bei kleinen Bildschirmen geladen wird
background-repeat:no-repeat;
background-size: contain;
border-radius: 5px;
text-align: center;
}


#banner h2 {
font-size: 2em;
letter-spacing: -2px;
line-height: 1.25em;
}

#banner span {
font-size: 1.25em;
letter-spacing: -1px;
line-height: 1.25em;
}

 

[MrMurphy]

Mit ein paar Änderungen ist es nicht getan. Der Quelltext ist leider vollkommen vermurkst. Da passt überhaupt nichts zueinander.

Wenn du eine Anfängerin bist wirst du das kaum hinbekommen. Es kann gutgehen, aber die Änderungen können die Seite auch zerschießen.

Kannst du die Änderungen an einer Kopie ausprobieren um das Original nicht zu zerschreddern?

Benutzt du einen aktuellen Editor?

Das Problem liegt in erster Linie auch am HTML, CSS ist eher am Rande beteiligt.

 

[LittleBlondi]

Ohje, da hab ich es ja voll drauf. ja ich kann eine Kopie nutzen, das ist gar kein Problem.
Vielleicht liegt es auch tatsächlich mit an meinem Editor. Ich nutze noch Xynx, sehr alt. Kannst Du mir einen empfehlen und dann weiter helfen?

 

[MrMurphy]

Der Editor ist ein Nebenkriegsschauplatz. Wahrscheinlich passen die Zeichensätze der Datei und des Quelltextes nicht zueinander. Da kann ein veralteter Editor eventuell weiteren Schaden anrichten.

Der Xynx ist offenbar so alt, dass dazu keine Infos mehr zu finden sind. Von daher würde ich den aussortieren.

Ein schneller Editor mit deutscher Oberfläche ist der PSPad.

Ich versuche die Änderungen so gering wie möglich zu halten. Die Änderungen werde ich in zwei weiteren Beiträgen beschreiben.

Den kannst du auf deren Homepage herunterladen:

http://www.pspad.com/de/

Dort in der linken Spalte auf "Download" und auf der Downloadseite die Datei "Portable (ZIP) 8,67 MB" herunterladen. Mit einer neuen Version wird sich auch die Dateigröße ändern. Das ist eine gepackte Datei, die du einfach nach dem Herunterladen in ein von dir neu angelegtes Verzeichnis entpacken kannst. Als Name bietet sich natürlich PSPad an.

Auf diesem Weg muss die Datei nicht installiert werden. Das Programm wird mit Doppelklick auf die Datei "PSPad.exe" gestartet.

Wenn du die Datei weiter nutzen willst kannst du ein Desktop-Icon erstellen, indem du die Datei "PSPad.exe" mit der rechten Maustaste anklickst und in dem Kontextmenü "Senden an" und in dem Folgemenü den zweiten Eintrag "Desktop (create shortcut)" auswählst.

Mit der Tastenkombination "Strg+F2" kannst du die linke Spalte schließen. Die wird normalerweise nicht benötigt. Mit nochmaligem Drücken kann die Leiste wieder eingeblendet werden.

Die Schriftgröße kann mit drücken der Strg-Taste + Drehen am Mausrad geändert werden. Ich finde etwas größer angenehmer.

Zum ändern müssen die Dateien "index.html" und "main.css" bearbeitet werden. Wie schon geschrieben am besten zunächst in einer Kopie.

Durch die Zeichensatzprobleme kann es sein, dass die Änderungen auf deinem Rechner (wahrscheinlich Windows) funktionieren, auf dem Webserver (Unix oder Linux) eventuell aber nicht. Deshalb würde ich die beiden Dateien vom Server vor dem Hochladen der geänderten Dateien noch mal extra sichern, um die gegebenfalls wieder zurückkopieren zu können.

 

[MrMurphy]

Änderungen an der "index.html":

Zunächst musst du folgenden Eintrag finden:

         <!-- Banner -->
            <div id="banner-wrapper">
               <div class="container">

                  <div id="banner">

                     <span>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br></span>
                  </div>

               </div>
            </div>

Dort löscht du

<span>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br></span>

und trägst stattdessen an selber Stelle folgendes ein:

            <img src="https://lebenslinie-praxis.de/assets/css/images/banner.jpg" alt="Logo gross">
            <img src="https://lebenslinie-praxis.de/assets/css/images/Logo-Lebenslinie-klein.png"

Du kannst die Einträge natürlich kopieren.

Die Pfade zu den Bildern kannst du auch kürzer fassen, wenn du den Pfad zu den Bildern kennst. Bei mir funktioniert das so, deshalb lasse ich die kurzen Pfade erst mal außen vor.

Das war der einfache Teil zum Warmwerden. Nein, es wird nicht viel schwieriger.

 

[MrMurphy]

Änderungen in der "main.css":

Zunächst musst du die beiden folgenden Einträge finden und löschen. An den Stellen wird nichts neues eingetragen. Die beiden Einträge befinden sich unabhängig voneinander (also räumlich getrennt) im letzten Drittel der Datei:

   #banner-wrapper {
      background: #c7d2a9 url(images/bg1.png);
      padding: 1em 0;
   }

   #banner {
      position: relative;
      width: 100%;
      padding: 0.5em 0;
      border-radius: 10px;
                 background-image: url(images/banner.jpg);
      background-size: cover;
      text-align: center;
      box-shadow: inset 0 0 0 10px #fff;
   }

und

         #banner-wrapper {
            background: #c8d2bc url(images/bg1.png);

            padding: 10px 0;
                                max-width: 100%;
                                height: auto;
         }

         #banner {
            box-shadow: inset 0 0 0 8px #fff;
            padding: 1em 1em;
                                max-width: 100%;
                                height: auto;
                                background-image: url(images/Logo-Lebenslinie-klein.png);

                                border-radius: 5px;
                                text-align: center;

                                background-size:cover;
                                background-repeat: no-repeat;
                                background-position:50% 50%;

                               }

Dann gehst du zum Ende der Datei. Dort befinden sich versetzt zwei geschweifte schließende Klammern.

Hinter die letzte Klammer kopierst du folgende CSS-Anweisungen:

   /*#banner*/
   @media all {
      #banner-wrapper {
         background-color: #c7d2a9;
         background-image: url(https://lebenslinie-praxis.de/assets/css/images/bg1.png);

         text-align: center;
         padding: 1em;
      }
      #banner-wrapper .container {
         padding: 1em;
         display: inline-block;
      }
      #banner-wrapper #banner {
         padding: 0em;
      }
      #banner-wrapper img {
         display: block;
      }
      #banner-wrapper img:nth-of-type(1) {
         display: none;
      }
   }
   @media only screen and (min-width: 950px) {
      #banner-wrapper img {
         border: 10px solid white;
         border-radius: 8px;
      }
      #banner-wrapper img:nth-of-type(1) {
         display: block;
      }
      #banner-wrapper img:nth-of-type(2) {
         display: none;
      }
   }

Dann noch die Änderungen speichern. Am Besten erst mal auf deinem Rechner anschauen. Wenn alles funktioniert die beiden Dateien auf den Server kopieren.

Ich konnte die Änderungen natürlich nicht an deiner Originaldatei ausprobieren.

 

[LittleBlondi]

Supi, ich danke Dir wie verrückt und werd das später direkt umsetzen und ausprobieren.

 

[blind]

warum eigentlich nicht so:

<img class="" src="/assets/css/images/banner_1920.png"
srcset=" /assets/css/images/banner_640.png 480w,
/assets/css/images/banner_640.png 768w,
/assets/css/images/banner_1280.png 992w,
/assets/css/images/banner_1920.png 1080w"
sizes=" (min-width: 50em) 33vw, (min-width: 28em) 50vw, 100vw" width="640" height="426" alt="..." >

noch ein kleiner Tipp; schau dir einmal die Fehler an und versuche diese zu beheben. Und wenn es noch besser werden soll, dann geht es hier weiter :-)

Ich würde dir als Editor - notepad++ empfehlen

VG