Hilfe - background-image an alle Endgeräte anpassen

[marcelgerard]

Hallo Leute,

ich möchte ein Background-Image an alle Endgeräte anpassen. Leider funktioniert bei mir nicht height: 100%. Dann macht er das Bild auch immer wieso nur kleiner. Kann es leider nicht zeigen, da es lokal gebaut wird. Ich hab schon alles mögliche ausprobiert, background-size etc. Aktuell sieht meine CSS Anweisung so aus:

.as-titel-photo {
        background-image: url("../titelbild.png");
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        height: 666px;
}

Hier z.B eine Beispiel-Seite wo das funktioniert. Werde da einfach nicht schlau draus

LG Marcel

 

[scbawik]

Hallo Leute,

ich möchte ein Background-Image an alle Endgeräte anpassen. Leider funktioniert bei mir nicht height: 100%. Dann macht er das Bild auch immer wieso nur kleiner. Kann es leider nicht zeigen, da es lokal gebaut wird. Ich hab schon alles mögliche ausprobiert, background-size etc. Aktuell sieht meine CSS Anweisung so aus:

.as-titel-photo {
        background-image: url("../titelbild.png");
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        height: 666px;
}

Hier z.B eine Beispiel-Seite wo das funktioniert. Werde da einfach nicht schlau draus

LG Marcel

body, html {
  width: 100%;
  height: 100%;
}

 

[marcelgerard]

Dann hängt das Bild aber in der Mitte. Denn meines ist nicht so hoch wie der gesamte Desktop-Bildschirm. Und sieht trotzdem komisch aus auf den anderen Endgeräten. Diese CSS Anweisung hat doch auch Auswirkung auf andere bereits existierende Container etc. ?

 

[scbawik]

Dann hängt das Bild aber in der Mitte. Denn meines ist nicht so hoch wie der gesamte Desktop-Bildschirm. Und sieht trotzdem komisch aus auf den anderen Endgeräten. Diese CSS Anweisung hat doch auch Auswirkung auf andere bereits existierende Container etc. ?

Das ist eine Basisregel die eigentlich jeder ohne nachzudenken von Anfang an definiert (oder zumindest so ähnlich). Das width könntest du dir auch sparen. Bzw. solltest du sogar.

Bzgl. Bildgröße:

background-size: cover;

100% orientieren sich immer am übergeordneten Element (so einfach ist es nicht, aber fällt mir gerade schwer das in Worte zu fassen). Wenn body oder html keine Höhenangabe haben, funktionieren untergeordnete Prozentangaben nicht. 100% von 0, sind 0.

 

[Sailor]

Auf der Beispielseite ist das Bild 'seitenbreit'. Soll das bei dir auch so sein?
Dann kannst du die Bildbreite auch auf 100vw setzen und dann die passende Höhe mit calc(100vw * xy) berechnen.
xy ergibt sich aus dem Höhen/Breitenverhätnis des Bildes - das ist dir ja bekannt!

 

[marcelgerard]

Also ich hab jetzt html und body height: 100%; gegeben. Meine CSS Anweisung zum Bild lautet jetzt so:

.as-titel-photo {
        background-image: url("../titelbild.png");
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        height: 70%;
        background-size: cover;
}

Die Höhe passt er jetzt an. Ich hab absichtlich 70% angegeben, weil ich will nicht, dass der gesamte Bildschirm bedeckt wird, außer bei den Smartphones. Die Breite schneidet er natürlich ab bei den kleineren Geräten wie iPad, Smartphones die quer sind. Liegt sicher am background-size?

 

[scbawik]

Also ich hab jetzt html und body height: 100%; gegeben. Meine CSS Anweisung zum Bild lautet jetzt so:

.as-titel-photo {
        background-image: url("../titelbild.png");
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        height: 70%;
        background-size: cover;
}

Die Höhe passt er jetzt an. Ich hab absichtlich 70% angegeben, weil ich will nicht, dass der gesamte Bildschirm bedeckt wird, außer bei den Smartphones. Die Breite schneidet er natürlich ab bei den kleineren Geräten wie iPad, Smartphones die quer sind. Liegt sicher am background-size?

Du musst halt entscheiden ob das Bild die Fläche füllen soll oder nicht. Um das auf verschiedenen Bildschirmen unterschiedlich zu handeln gibt es Media Queries.

 

[nicosammito]

Also ich hab jetzt html und body height: 100%; gegeben. Meine CSS Anweisung zum Bild lautet jetzt so:

.as-titel-photo {
        background-image: url("../titelbild.png");
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        height: 70%;
        background-size: cover;
}

Die Höhe passt er jetzt an. Ich hab absichtlich 70% angegeben, weil ich will nicht, dass der gesamte Bildschirm bedeckt wird, außer bei den Smartphones. Die Breite schneidet er natürlich ab bei den kleineren Geräten wie iPad, Smartphones die quer sind. Liegt sicher am background-size?

Füg das mal ein

*html{
    padding: 0px;
    margin: 0px;
}