LittleBlondi
Neues 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;
}
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;
}