Å lage en parallakseside i full bredde med Bootstrap innebærer bruk av bakgrunnsbilder, posisjonering og CSS3-transformasjoner. Slik kan du oppnå dette:

HTML-struktur

1. Lag en grunnleggende HTML-struktur med en "body" og "header"-seksjon:

```html

bakgrunnsvedlegg:fast;

bakgrunnsstørrelse:cover;

bakgrunns-gjenta:ikke-gjenta;

høyde:100vh;

}

/* Parallax-stiler */

.parallax-container {

stilling:pårørende;

høyde:100vh;

}

.parallax-lag {

posisjon:absolutt;

topp:0;

venstre:0;

bredde:100 %;

høyde:100 %;

}

.parallax-layer--image {

bakgrunnsvedlegg:fast;

bakgrunnsstørrelse:cover;

bakgrunns-gjenta:ikke-gjenta;

}

/* parallakseeffekter */

@media (maks. bredde:992px) {

.parallax-layer--image {

transform:translate3d(0, 0, 0);

}

}

@media (min-bredde:992px) {

.parallax-layer--image {

transform:translate3d(-50%, 0, 0);

}

}

```

Forklaring

- 'Kroppen' er satt til svart som bakgrunnsfarge.

- `Toppteksten` har et fast bakgrunnsbilde, dekker hele viewporthøyden og har ingen repetisjon.

- `.parallakse-beholderen` har en relativ posisjon, slik at barneelementene kan plasseres absolutt i den.

- `.parallakse-laget` er absolutt plassert og dekker hele beholderen.

- `.parallax-layer--image` har et bakgrunnsbilde, er fast, dekker hele laget og har ingen repetisjon.

- Mediespørringene bruker parallakseeffekter basert på skjermbredde. Ved mindre bredder (mobile enheter) er det ingen parallakseeffekt, mens ved større bredder (skrivebord) er det en parallakseeffekt med bakgrunnsbildene som beveger seg sakte mens du blar.

Bruk

3. Inne i "kroppen", legg til flere "div"-elementer med klassene ".parallax-container" og ".parallax-layer" for å lage ditt parallakseinnhold:

```html

```

Ved å legge til flere `.parallax-container` og `.parallax-layer`-elementer, kan du lage flere parallax-seksjoner med forskjellige bilder.

Merk: Bildene som brukes for parallakse bør være høyoppløselige og store nok til å dekke visningsporten uten forvrengning.