Hilfe bei Bildskalierung mit CSS

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

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

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
 

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.
 

Ähnliche Java Themen

Neue Themen


Oben