Achtergrond niet laten meescrollen

**Joshua K** · 25-11-2013, 19:58

Hi,

Ik ben bezig met een nieuwe website maar ik zit met een probleempje. Ik heb een achtergrond image ingesteld maar als ik grote lappen tekst heb scrolled die mee. Ik wil de achtergrond juist niet laten mee scrollen. Ik heb het volgende al gedaan in de style.css:
background-repeat: no-repeat;
background-attachment: fixed;

Ik krijg het echter niet voor elkaar.

De link is:
http://scheids.eu/uitleg-buitenspel/

Kan iemand mij verder helpen?

Groetjes.

**Erik Kraijenoord** · 25-11-2013, 20:01

Je achtergrond afbeelding CSS hierin veranderen.

background: url("images/bg.png") 10% fixed;

**Joshua K** · 25-11-2013, 20:22

Dankje,

dit heeft geholpen!

**Wilbert E.** · 25-11-2013, 20:25

Deze link is zeer interessant, je achtergrond afbeelding schaalt dan namelijk mee naar de grootte van de browser.
Dus je achtergrond afbeelding ziet er hetzelfde uit op grote schermen en op kleine schermen.

http://css-tricks.com/perfect-full-page-background-image/

Voorbeeld: http://css-tricks.com/examples/FullP...rogressive.php
Schaal deze pagina om het effect te zien.

Het komt erop neer dat je een div maakt met full height en full width. Je achtergrond div.
Waarom niet direct op de body tag? IE8 en lower krijgt problemen met scrollen als je het filter op de body toepast.

Code:

<html>
<body></body>
</html>

Dan de volgende css code om de div te positioneren:

Code:

.background{
      left: 0px;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1;
      overflow-x: hidden;
}

En de volgende css voor je achtergrond. Vervang [AFBEELDINGURL] door je afbeelding-url.

Code:

.background{
     background: url([AFBEELDINGURL]) fixed #1f1f1f no-repeat center top fixed;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=#{[AFBEELDINGURL]}, sizingMethod='scale');
     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=#{[AFBEELDINGURL]}, sizingMethod='scale')";
     -webkit-background-size: cover;
     -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

Achtergrond niet laten meescrollen