Header-Image an Bildschirmgröße automatisch anpassen

Hallo

Das Bild verschiebt sich nur hinter die Navigation.

Ich sehe eher das Problem dass das Bild bei Smartphonebreite im Hochformat kaum noch zu erkennen ist. Heißt: Wenn wir eine Lösung anbieten wird sie in der Praxis sinnfrei sein.

Gruss

MrMurphy

Hallo

Zieh einfach mal das Browserfenster bei einem Desktop-Bildschirm schmaler.

Gruss

MrMurphy

Hallo

Du hast das Headerbild als Hintergrundbild eingebunden.

Hintergrundbilder sind in HTML / CSS jedoch nur als schmückendes Beiwerk gedacht, die von anderen Informationen überlagert werden und die entsprechend selbst keine Informationen enthalten. Deshalb verhalten sie sich auch grundsätzlich anders als Vordergrundbilder.

Das Verhalten, welches du erreichen willst entspricht dem von Vordergrundbildern. Entsprechend solltest du das Bild auch als Vordergrundbild mit dem img-Element in den Quelltext einbinden. Dann braucht es als CSS-Anweisung im Prinzip nur eine max-width-Anweisung und verhält sich wie von dir gewünscht.

Als Hintergrundbild läßt sich so ein Verhalten nur mit Tricks und damit Hängen und Würgen erreichen. Immer in dem Wissen, dass es zu Problemen kommen kann.

Wenn du das Bild trotz der damit verbundenen Nachteile (Erkennbarkeit bei schmalen Fenstern) immer vollständig anzeigen lassen willst solltest du es als Vordergrundbild einbinden.

In der folgenden Beispielseite erthält das Bild (img-Element) nur wenige CSS-Anweisungen:

display: block;
max-width: 100%;
border: 0;
margin: 0 auto;

Das Bild verhält sich wie von dir gewünscht und es gibt keine Probleme mit Überlappungen von Containern, da sie sich wie in HTML / CSS vorgesehen gegenseitig anordnen können. Das ganze damit auch vollkommen geräteunabhängig.

ChiefIntensiv Testseite

Zusätzlich solltest du zumindest das Logo separat einbinden, damit es auch in schmalen Fenstern gut sichtbar ist.

Gruss

MrMurphy

Ich habe mir mal deinen Code angeschaut. Es ist möglich mit CSS dein Problem zu lösen. Jedoch muss man dazu sagen das die strucktur einfach nicht optimal ist. Besser ist es wenn du das Logo der Webseite als <img> einbindest. Und nicht wie derzeit als Background-Image. Den das Background Image übernimmt keine Höhe vom Fließtext, ein ImageElement jedoch schon. Wenn du das Image als Bild einfügst kannst du das Bild mit folgenden Eigenschaften immer mittig positionieren und es Scalliert mit. Und der Content richtet sich nach deinem Logo.

img.irgendEineKlasse{
  display: inline-block;
  min-width: 400px;
  max-width: 1557px;
  width: 100%;
  margin: 0 auto;
}

Lg Sassar

Hey,

Zitat

Was genau ist gemeint mit "img.irgendEineKlasse" ?

Du hast doch deinem Bild eine id oder class zugewiesen. Nimm nun den id/class namen den du dem Bild zugeordnet hast und verwende diesen im css.
Id-namen kennzeichnest du mit # und class-namen mit .

Dann sollte es z.b so aussehen:

img.header{
  display: inline-block;
  min-width: 400px;
  max-width: 1557px;
  width: 100%;
  margin: 0 auto;
}

Um dies zu wissen müssen wir erstmal dein code sehen.

Anstatt header dort deinen id/class namen reinschreiben und alle css befehle die das Bild betreffen ersetzen durch Sassars code.

Gruß, Stef

Hey,

kein Problem. Jeder fängt mal klein an.

#img.header-2XXXXXXXXX.jpg {
    display: inline-block;
    min-width: 400px;
    max-width: 1557px;
    width: 100%;
    margin: 0 auto;
}

Dies ist so falsch.

Wenn du dein Background-Image (image über Nav) mittels css eingebunden hast dann mach es raus und binde es in html ein.

<img src="deinbild.jpg" alt="Beispieltext">

Und du kannst diesem Bild einfach ne klasse geben indem du es so machst:

<img class="header-pic" src="deinbild.jpg" alt="Beispieltext">

Nun nimmst du den code von sassar und änderst die klasse in css so:

img.header-pic {
    display: inline-block;
    min-width: 400px;
    max-width: 1557px;
    width: 100%;
    margin: 0 auto;
}

Wozu gehört denn dies hier?

.site-header .home-link {
    color: #141412;
    display: block;
    margin: 0 auto;
    max-width: 1557px;
    min-height: 230px;
    padding: 0 20px;
    text-decoration: none;
    width: 100%;
}

Stef

Zitat von Stef

Wozu gehört denn dies hier?

Code

.site-header .home-link {
    color: #141412;
    display: block;
    margin: 0 auto;
    max-width: 1557px;
    min-height: 230px;
    padding: 0 20px;
    text-decoration: none;
    width: 100%;
}

Stef

Da Bilder manchmal mehr erklären als 1000 Worte

[http://tommy-bley.de/web-hilfe/css_klassen.png -> Link für besser Qualität]

Das nächste ist, wenn du deine CSS Classe so nennst wie von dir oben beschrieben:

#img.header-2XXXXXXXXX.jpg {
display: inline-block;
min-width: 400px;
max-width: 1557px;
width: 100%;
margin: 0 auto;
}

würde das im HTML Code so aussehen müssen damit diese eigenschaft greift:

<img id="img" class="header-2XXXXXXXXX jpg" src="[pfad zur datei]" />

Wie du siehst wäre das relativer Blödsins wenn du im CSS ein String mit einer Route (#) markierst bedeutet das, dass du eine ID im HTML ansprichst. Achte hier darauf, wenn du valides HTML schreiben willst, dass du in auf einer HTML Seite immer nur eine ID drauf hast.
Da eine ID ja was eindeutiges sein soll. CSS würde dennoch bei mehreren ID's alles richtig darstellen. Erst wenn du JavaScript schreibst würde dir das dann auf die Füße fallen.

Wenn du Strings im CSS mit einen Punkt notierst (.), sprichst du eine HTML Klasse an. Hier können auch durchaus mehrere pro Element und auch mehrfach wiederverwnedet werden. Deswegen sollte man sich für Cleancode eher auf Klassen konzentrieren und nur für eindeutige Sachen IDs verwenden.

Wenn du im CSS einen String schreibst ohne irgendwas, wie z.B. div, dann sprichst du direkt den HTML Tag an. In diesem Fall wäre es der Div-Container.

Nun kann man im CSS auch klassen kombinieren bzw Breadcrumbs (Krümmelpfade) ertellen. Damit schaffst du dir eine Ebene, die gewisse HTML-Bedingungen, an gewisse DOM Sturckuren anhängst.

zum beispiel hast du in deinem HTML mehrere Image Tags, <img /> jetzt hast du eventuell ein zwei Spalten Layout und möchtest auf der rechten Seite das die Bilder immer 200px Breit sind und auf der Linken Seite immer 150px Breit sind.

jetzt könntest du das wie folgt lösen

.leftSide img {
  width: 200px;
}


.rightSide img {
  width: 150px;
}

in dem ich die Zwei spalten jeweils mit einer Klasse leftSide und rightSide versehen habe. Kann ich nun wunderbar sagen das alle Bilder welche im Container mit der Elternklasse .leftSide sind auch wirklich 200px breit sind dabei ist es egal ob die bilder in weiteren Container steckt, weil ich ja sage beliebig viele Container zwischen .leftSide ..... img sein dürfen. Möchte ich hingegen sagen. Das nur Bilder die direkt in leftSide liegen 200px Breit sein sollen das muss das so aussehen:

.leftSide > img {
  width: 200px;
}

mit dem Größerkleiner Zeichen, (>) kann ich nun im CSS sagen das ich nur direkte Kinder ansprechen möchte.

Es gibt natürlich noch ca 50.000 andere CSS REgelen aber für den CSS Einstieg sollte das was bringen

Ich hoffe ich konnte etwas licht ins dunkel bringen

Lg Sassar

- - - Aktualisiert - - -

Und sry für meine schlechte Ausdrucksweise xD

ich kann dir eine Schritt für Schritt anleitung geben aber dafür solltest du das HTML umbauen da sonst der CSS Code einfach den Rahmen sprengt. Wenn du das Bild also mittels des HTML Tags <img /> einbindest kannst du, wie von mir weiter oben schon geschriebenen code, einfach anwenden. Dieser Funktioniert aber nur bei einen Image Element nicht bei einen Background Image

Lg Sassar

Nein brauchst du nicht.

Es geht mit dem img-tag. So sieht es dann aus in HTML ohne id oder class hinzuzufügen:

<img src="hierdeinbild" alt="Beispieltext" >

Wenn man nun noch eine class hinzufügen möchte fügt man einfach class="deinclassname" hinzu:

<img class="deinclassname" src="hierdeinbild" alt="Beispieltext" >

Und wenn du nun diesen class name (deinclassname) in css aufrufen willst geht es mit dem . Selektor :

Deine HTML Datei :

<img class="deinclassname" src="hierdeinbild" alt="Beispieltext" >

Und css dazu:

.deinclassname {

}

mit .deinclassname sprichst du dann die class im img tag an und kannst somit schon loslegen mit css.

Stef