Backgroundphotos in “grid line” (Rasterzeile) on tablets don´t adapt size

leider ist deine Seite ja nicht online erreichbar, es wird nur eine “Coming Soon” Seite angezeigt.
Wenn du allerdings auf diese Demoseite (Link) abzielst, dann ist es auch dort nicht so, dass die Bilder responsive sein können. Der Grund ist, dass es eben keine Bilder sondern Hintergrundbilder sind.
( PS beim Einsetzen der Hintergrund-Bilder darauf achten, dass du auch die Vollauflösung einsetzt und kein 300px Bild )

Man könnte das zwar erreichen ( am leichtesten dadurch, das zunächst alle Hintergrundbilder die gleichen Dimensionen – zumindest aber die gleichen Seitenverhältnisse aufweisen). Den Hintergrund dann auf Scroll zusetzen ist ratsam wie es Ismael vorgeschlagen hat, denn ein Cover Bild müsste ja die gesamte Screenhöhe ( nicht die Containerhöhe ) abdecken.

Ein Hintergrundbild auf cover gesetzt ist dann “responsiv”, wenn die Containerhöhe mit dem Seitenverhältnis des Hintergrund-Bildes correliert.
Auf meiner Beispielseite haben die Bilder ein 16/9 Seitenverhältnis ( 1920/1080) haben also bei voller Breite (100vw) eine Höhe von 56.25vw !

_________

unfortunately your page is not available online, only a “Coming Soon” page is displayed.
However, if you point at this demo page (Link) , then it is also not the case that the images can be responsive. The reason is that they are not images but background images.
( PS when inserting the background images make sure that you also use the full resolution and not a 300px image ).

You could achieve this (the easiest way is, that all background images have the same dimensions – but at least the same aspect ratio). Setting the background to scroll is advisable as Ismael suggested, because a cover image would have to cover the whole screen height (not the container height).

A background image set to cover is “responsive” if the container height correlates with the aspect ratio of the background image.
On my example page the images have a 16/9 aspect ratio ( 1920/1080 ) so at full width ( 100vw ) they have a height of 56.25vw !

see ( with 989px breakpoint):
https://webers-testseite.de/gridrow-layout-with-fixed-bg/

Bei iPad Quer hast du dann die Grid-Zellen nebeneinander?
Das Problem bei dem Konstrukt ist ja das der Content in der anderen Grid-Zelle die Höhe bestimmen muß – ansonsten würde der in das Overflow geraten, oder abgeschnitten werden.
Daher funktioniert das nur entweder wenn wir im Responsiven Fall sind ( also jede Grid-Zelle die 100% füllt) oder in seltenen Fällen der Content in der anderen Zelle sehr klein ist, sodaß man die Zelle mit dem Hintergrund bestimmen lassen kann wie hoch die Grid-Row ist.

Schau dir nochmal die Beispielseite an. Unten ist der o.a. Fall : wenig Content
bei einer 1/2 Grid-Cell hast du dann auch nur die Halbe Höhe um ein “responsives” Verhalten zu erzwingen.
Mit fixed geht dies nich ( und schon garnicht mit parallax ) Fixierte Elemente befinden sich quasi nicht im ElternContainer – daher ist die basis eines
background-attachment : fixed die 100% screenweite.

Für den Fall Grid-Cells nebeneinander habe ich eine weitere Klasse gesetzt:

_____________

With iPad landscape you have the grid cells next to each other?
The problem with the construct is that the content in the other grid cell must determine the height – otherwise it would get into the overflow, or be cut off.
Therefore this only works if we are in the responsive case (i.e. every grid cell fills 100%) or in rare cases the content in the other cell is very small, so you can let the cell with the background determine how high the grid row is.

Have a look at the example page again. Below is the above case : little content
with a 1/2 grid-cell you have only half the height to force a “responsive” behavior.
With fixed this is not possible ( and certainly not with parallax ) Fixed elements are not in the parent container – therefore the base of a
background-attachment : fixed is the 100% screen width.

For the case of grid-cells next to each other I set another class:

@media only screen and (min-width: 990px) {
  #top .flex_cell.responsives-verhalten.nebeneinander  {
    background-attachment: scroll;
    padding: 0 !important
  }

  #top .flex_cell.responsives-verhalten.nebeneinander .flex_cell_inner {
    height: calc(56.25vw / 2) !important;
  }
}

_____________

Hi Guenni007,
ich habe das gleiche Problem auf meiner Seite. Die Hintergrund-Bilder in den einzelnen Reihen werden nicht korrekt zentriert.
Was genau muss ich tun, um es wie in deiner Demo-Seite hinzubekommen?

Ich hoffe auf deine Unterstützung :)

Viele Grüße