Avatar billede hanibald Mester
12. december 2017 - 18:51 Der er 3 kommentarer og
1 løsning

Bootstrap4: Scroll æder baggrundsbillede

Indenfor rammerne af Bootstrap 4 har jeg følgende 2 lokale selektorer:

body, html {
    height: 100%;
}
.bg-img {
    background-image: url("billeder/billednavn.png ");
    height: 100%;
  background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

og følgende HTML:

<body>
<div class="container-fluid bg-img"> <!-- Baggrundsbillede fuld skærm -->
<div class="container">
diverse html
</div> <!-- container slut -->
</div> <!-- baggrundsbillede slut-->
diverse js-links
</body>

Baggrundsbilledet vises og fastholdes perfekt i hele skærmens fulde bredde og højde - testet på flere skærme >1200px..

Ved scroll nedover siden "ædes" baggrundsbilledet imidlertid nedefra i takt med scroll af hvid baggrund i hele skærmens bredde.

Hvordan kan jeg fastholde baggrundsbilledet og undgå, at det bliver "ædt"?
Avatar billede Slater Ekspert
13. december 2017 - 09:20 #1
Skal det forstås sådan, at du vil have div'en med baggrundsbilledet aldrig forsvinder, men altid ligger i toppen af skærmen, også når der scrolles?

I så fald er det ikke background-attachment: fixed; du skal bruge, men derimod position: fixed; - da det er elementet der skal ligge fast, ikke billedet.
Avatar billede hanibald Mester
13. december 2017 - 21:56 #2
Rigtigt forstået.

Det har du muligvis ret i, men så kan jeg ikke scrolle.
Avatar billede Slater Ekspert
13. december 2017 - 22:58 #3
Ah, det fylder 100% i højden, det overså jeg. Så det du vil er at have en baggrund på hele siden, som bliver hvor den er når du scroller ned. Så er baggrund-attachment korrekte, men sæt det og billedet direkte på body'en.
Avatar billede hanibald Mester
15. december 2017 - 17:23 #4
Bingo. Når jeg samtidig fjernede "container fluid".
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester