dynamisches Sizing

[tomtothet]

Hi zusammen,
ich bin recht neu im Thema Web Design und teste gerade ein paar Designideen für meine Wordpress/Elementor Webseite. Dieser Effekt (codepen.io/Thomas-Thiel/pen/wBwgLOy) gefällt mir sehr gut und ich würde ihn gerne als Hintergrund für meine Hero Section nutzen. Dazu habe ich in Elementor einen Container mit folgendem Custom CSS ausgestattet

/* Definition der benutzerdefinierten Eigenschaften */
@property --i0 {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

@property --j0 {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

@property --k0 {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

/*
body {
  margin: 0;
  font-family: sans-serif;
}
*/

/* Stil für die Sektion */
bg {
  --i0: 0;
  --j0: 0;
  --k0: 0;
  animation: i0 3.2591s linear infinite, j0 4.6087s linear infinite,
    k0 7.5s linear infinite;
  display: grid;
  height: 55vh;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  --map: conic-gradient(
    from calc(var(--k0) * 360deg),
    #777,
    #000 calc(var(--j0) * 50%),
    #777
  );
  animation-direction: normal, alternate, normal;
  animation-timing-function: linear, ease-out, linear;
}

bg::before {
  background: radial-gradient(circle, #8f00ff 0%, #45007a 100%);
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

/*
section:not(:hover) {
  animation-play-state: paused;
}
*/

/* Stil für das Halftone-Element */
.halftone {
  place-self: stretch;
  position: relative;
  z-index: 1;
  background: var(--map),
    radial-gradient(closest-side, #888, #000) 0 / 1em 1em space;
  background-blend-mode: screen;
  mix-blend-mode: multiply;
  filter: contrast(21);
}

/* Animationen für die benutzerdefinierten Eigenschaften */
@keyframes i0 {
  to {
    --i0: 1;
  }
}
@keyframes j0 {
  to {
    --j0: 1;
  }
}
@keyframes k0 {
  to {
    --k0: 1;
  }
}

Darin habe ich ein HTML Widget platziert:

  <bg>
    <div class="halftone"></div>
  </bg>

U.a. wegen Responsive Design möchte ich die Größe des Containers über Elementor einstellen. Leider stehe ich offensichtlich gerade auf dem Schlauch. Wenn ich die Höhe in der bg Klasse von vh auf % umstelle, verschwindet alles. Ich weiß, dass bei %-Angaben ein übergeordnetes Element da sein muss. Es macht aber auch keinen Unterschied, wenn ich den Container in einen übergeordneten Container packe, der eine Höhe hat.

Ich habe das Gefühl, dass die ganze Struktur noch nicht optimal ist, um sie über Elementor einzubauen und wäre super dankbar, wenn wir hier jemand Erfahrenes einen Tipp geben würde, wie ich das Ganze besser strukturiere.

Schönen Abend,
tomtothet

 

[Sempervivum]

Guten Abend @tomtothet und willkommen im Forum!
Cooler Effekt!

Wenn ich die Höhe in der bg Klasse von vh auf % umstelle, verschwindet alles. Ich weiß, dass bei %-Angaben ein übergeordnetes Element da sein muss. Es macht aber auch keinen Unterschied, wenn ich den Container in einen übergeordneten Container packe, der eine Höhe hat.

Um herauszufinden warum das so ist, muss man wohl dieses bg-Element im Zusammenhang sehen. Poste entweder den Link zur Seite oder mach dich mit dem Seiteninspektor deines Browsers vertraut, damit kannst Du das sehr gut untersuchen:
https://wiki.selfhtml.org/wiki/Arbeiten_mit_dem_Seiteninspektor