• Wir präsentieren Dir heute ein Stellenangebot für einen Frontend-Entwickler Angular / Java in Braunschweig. Hier geht es zur Jobanzeige

Hilfe bei Bildskalierung mit CSS

L

LittleBlondi

Mitglied
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;
}
 
mihe7

mihe7

Top Contributor
Probier mal:
CSS:
#banner {
...
background-size: contain; /* alternativ auch mal 100% 100%; ausprobieren */
background-repeat: no-repat;
background-position: center center;
...
}
 
Thallius

Thallius

Top Contributor
Also so recht verstehe ich das Problem gerade nicht. Wenn das bild über den ganzen Screen gehen soll Must du doch eigentlich nur left,top,Right und bottom auf 0 setzen
 
L

LittleBlondi

Mitglied
Das Problem ist z.B. das Tablet, da stimmt das Bild einfach nicht und beim Handy ist es abgeschnitten.
 
mihe7

mihe7

Top Contributor
So sieht das aus:

Bildschirmfoto von »2021-02-17 00:19:54«.png


und das Bild wird abgeschnitten...
 
L

LittleBlondi

Mitglied
Ja, es hat mir keine Ruhe gelassen und ich hab weiter daran gearbeitet und probiert.
 
mihe7

mihe7

Top Contributor
Noch mal kurz zusammengefasst: Du kannst einerseits durch Formatierung der Elemente passende Einstellungen setzen, andererseits durch Media Queries passende Einstellungen in Abhängigkeit von z. B. der verfügbaren Bildschirmgröße vornehmen.

Wichtig in CSS ist, dass es von oben nach unten verarbeitet wird, die Reihenfolge im CSS spielt also eine Rolle.

Beispiel:
CSS:
@media (min-width: 1000px) {
  body { background: green; }
}
@media (min-width: 500px) {
  body { background: blue; }
}
Steht für die Ausgabe eine Breite von 1024px zur Verfügung, dann greifen beide Queries und die Einstellungen der unteren überschreiben ggf. die Einstellungen der oberen. Bei einer Ausgabebreite mit 600px greift dagegen nur die untere. Im konkreten Fall spielt es also keine Rolle, ob mehr als 500px oder mehr als 1000px zur Verfügung stehen, der Hintergrund wird immer blau angezeigt.

Dreht man die Reihenfolge um,
CSS:
@media (min-width: 500px) {
  body { background: blue; }
}
@media (min-width: 1000px) {
  body { background: green; }
}
dann werden zuerst Einstellungen für die schmalere Ausgabe vorgenommen, die dann ggf. mit den Einstellungen für die breitere Ausgabe überschrieben werden. Stehen also 600px zur Verfügung, dann ist der Hintergrund blau, stehen mehr als 1000px zur Verfügung, wird er grün.
 
L

LittleBlondi

Mitglied
Ah okay, ich wusste nicht, dass die Reihenfolge so wichtig ist. Danke Dir für den Tipp.
 

Ähnliche Java Themen

Anzeige

Neue Themen


Oben