Antworten auf deine Fragen:
Neues Thema erstellen

#header mit Bild und automatischer Höhe?

lumpidumpi

Noch nicht viel geschrieben

Hallo,

ich versuche gerade einen #header der über die ganze Breite geht so anzupassen, dass sich die Höhe des #header proportional mit dem verändert.

Dabei geht das #header Element über die ganze Breite allerdings ist die Höhe nicht flexibel. Auch mit auto als Eigenschaft oder 100% funktioniert es nicht.

Ich habe schon backstretch via jquery eingepasst und die Höhe vom Bild ausgelesen um sie dann in den Container via .css zu schreiben, das funktioniert soweit, dass ich den #header anpassen kann aber das img im #header bleibt ohne Höhenveränderung.

Es gibt ja Webseiten, wo das funktioniert, dass das Header-Bild proportional mit skaliert wird? Wie kann ich das erreichen?
 

owieortho

Aktives Mitglied

Es gibt ja Webseiten, wo das funktioniert, dass das Header-Bild proportional mit skaliert wird? Wie kann ich das erreichen?
...dann wäre doch der erste Ansatz den Quellcode dieser Seiten zu begutachten, die Seiten gegebenenfalls nachzubauen und dann Stück für Stück zu reduzieren und mit eigenen Inhalten zu ersetzen.

Am Rande bemerkt: Du bist äußerst spasam mit Deinen Informationen. Keine Links zu den Seiten, wo es funktioniert, Dein "Code" ist auch nur ein HTML-Schnipsel, aus dem nicht ersichtlich ist, wie und wo dieser im gesamten HTML der Seite verortet ist. CSS und JS zu den angezeigten tags und ids bzw. der umgebenden Elemente fehlen. Da bleibt nur Wahrsagen oder im Trüben Fischen.

O.
 

lumpidumpi

Noch nicht viel geschrieben

Das Problem ist ich habe die Seite nicht im Web.

Code:
<header id="header">
            <div class="container headerContainer content">
                <div class="jumbotron text-center text-sm-center text-md-center">
                    <h1 class="display-4">Hello, world!</h1>
                    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                </div>
                <!-- End Jumbotron -->
            </div>
            <!-- End Container -->
        </header>

und CSS ist das jetzt hier:

Code:
#header {
    margin-top: 50px;
    background: url(./images/favpic.jpg) 0 0 no-repeat;
    background-size:cover;
    height: -webkit-fill-available;
    min-height: -moz-available;
    height: stretch;
    height: 100%;
}

Ich war ja nicht untätig. Lediglich auf Firefox funktioniert das ganze nicht. Ansonsten habe ich das schon in Opera und Chrome hinbekommen.

Deswegen habe ich jetzt eigentlich nur die Frage: warum funktioniert das nicht
Code:
min-height: -moz-available;
?
 

Dudlhofer

Aktives Mitglied

Code:
min-height: -moz-available;

Wo hast Du die Variable -moz-available denn her? Die ist selbst Google gänzlich unbekannt. Kann es sein, dass Du die von einer Seite übernommen hast, die LESS oder irgendeinen anderen CSS_Preprozessor verwendet?
 

Myhar

Hat es drauf

Code:
min-height: -moz-available;

Wo hast Du die Variable -moz-available denn her? Die ist selbst Google gänzlich unbekannt. Kann es sein, dass Du die von einer Seite übernommen hast, die LESS oder irgendeinen anderen CSS_Preprozessor verwendet?

Du hast wohl nach -moz-available gesucht. Hier ist zu erwähnen dass google bei Suchbegriffen die mit - anfangen Seiten angibt wo die Wörter nicht vorkommen. Funktioniert nur in Kombination mit anderen Wörtern, sucht man also nur nach einem Suchbegriff der mit - anfängt findet er natürlich nichts. Da muss man nach "-moz-available" (man beachte die Anführungszeichen) suchen, dann findet google auch genug Inhalte.
Auch ist - keine Variablenbezeichnung für CSS Preprozessoren sondern deutet immer auf browser präfixe hin. Aber das nur am Rande als Info warum hier nichts gefunden wurde.


Allerdings nicht in Firefox, das ist schon krass.

Krass ist auch dass du keine Infos zu den Seiten lieferst wo "es ja funktioniert" .
Ich bin mir hier zu 99% sicher dass es sich dabei um etwas mit "max-width: 100%" (die img-responsive Klasse von bootstrap) handelt, aber ohne es zu sehen kann ich da nicht weiterhelfen.
Auf der Seite die du verlinkt hast steht auch: "This is an experimental API that should not be used in production code."
Also besser nicht verwenden. ;)
 

lumpidumpi

Noch nicht viel geschrieben

Also ich habe jetzt das gefunden: https://stackoverflow.com/questions/55133385/moz-available-height-not-working-in-firefox

Das hat mir jetzt weitergeholfen und mein Problem gelöst :) Der Container wird jetzt auch wie in Webkit-Browser in der Höhe voll aufgezogen und zeigt das Hintergrundbild vollständig an.

Krass ist auch dass du keine Infos zu den Seiten lieferst wo "es ja funktioniert" .
Ich bin mir hier zu 99% sicher dass es sich dabei um etwas mit "max-width: 100%" (die img-responsive Klasse von bootstrap) handelt, aber ohne es zu sehen kann ich da nicht weiterhelfen.
Auf der Seite die du verlinkt hast steht auch: "This is an experimental API that should not be used in production code."
Also besser nicht verwenden. ;)

Das Problem ist eine Seite die ich in html bastle. Das irgendwie im Web verfügbar zu machen ist mir zu kompliziert mit den Freigaben usw.

Das Problem zuletzt ist ja insofern auch von der Beschreibung ganz simpel. Ohne das da HTML nötig ist. Kennt jemand einen Grund dafür, dass -moz-available nicht funktioniert? Auch anfänglich wollte ich ja eigentlich nur wissen, wie ich es hinbekomme einen Container, mit einem Hintergrundbild (war anfangs falsch) auf volle Größe zu bekommen?

Gruß an Euch und Danke!
 

Myhar

Hat es drauf

Vorneweg einmal: Ich lese da also heraus dass du das Problem lösen konntest? Das ist ja wirklich gut :)

Das Problem ist eine Seite die ich in html bastle. Das irgendwie im Web verfügbar zu machen ist mir zu kompliziert mit den Freigaben usw.

Ein kurzer Punkt noch dazu: In der zweiten Antwort wurdest du auf jsfiddle aufmerksam gemacht, aber leider ohne Link. Das ist genau dafür da, da kannst du dein HTML + CSS posten ohne dir über so was Gedanken machen zu müssen. Ohne Code kann man nämlich wirklich nur schwer, bzw. oft gar nicht helfen.
Beim nächsten Mal verwendest du das am besten gleich in der Frage damit wiruns ein Bild von deinem von deinem Problem machen können. Und bitte nicht den gesamten HTML+CSS Code dort reinkopieren sondern wirklich nur den Teil der für eine Frage relevant ist.
 

lumpidumpi

Noch nicht viel geschrieben

Vorneweg einmal: Ich lese da also heraus dass du das Problem lösen konntest? Das ist ja wirklich gut :)



Ein kurzer Punkt noch dazu: In der zweiten Antwort wurdest du auf jsfiddle aufmerksam gemacht, aber leider ohne Link. Das ist genau dafür da, da kannst du dein HTML + CSS posten ohne dir über so was Gedanken machen zu müssen. Ohne Code kann man nämlich wirklich nur schwer, bzw. oft gar nicht helfen.
Beim nächsten Mal verwendest du das am besten gleich in der Frage damit wiruns ein Bild von deinem von deinem Problem machen können. Und bitte nicht den gesamten HTML+CSS Code dort reinkopieren sondern wirklich nur den Teil der für eine Frage relevant ist.

Schon klar, das Ferndiagnosen schwer sind. Mal sehen.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben