# Hintergrund abdunkeln



## Alex S (9. Mai 2012)

Hallo User,

Ich habe folgendes Problem: Ich habe auf meiner Website eine Art Bildergalerie. Wenn man auf ein Bild klickt öffnet sich ein Div Container mit dem Bild und ein paar Kommentare. Jetzt möchte ich das sich der Hintergrund abdunkelt, wenn sich der Div Container öffnet.

Ich hoffe ihr könnt mir helfen. 

Alex S.


----------



## SpiceLab (9. Mai 2012)

Dein Betreff _Hintergrund abdunkeln_ via (CSS-)Forensuche führt zu Seite abdunkeln?.


----------



## Alex S (9. Mai 2012)

spicelab hat gesagt.:


> Dein Betreff _Hintergrund abdunkeln_ via (CSS-)Forensuche führt zu Seite abdunkeln?.



Und was heißt das?


----------



## SpiceLab (9. Mai 2012)

Dass deine gesuchte CSS-Lösung hier im Forum schon existiert. 

"Lightbox & Co" nutzen ebenso eine zunächst versteckte DIV-Ebene  mit dunklem Hintergrund und schwacher Transparenz, die den Viewport in Breite und Höhe vollständig ausfüllt, sowie in der *z-index*-Ebene über dem Seiteninhalt liegt. 

Diese wird dann per JavaScript analog zur  Bildergalerie sichtbar/unsichtbar geschaltet.

Noch ein Tipp: statt *position:absolute* wählst du  in dem CSS besser *position:fixed* ;-)


----------



## Alex S (10. Mai 2012)

Danke
Daran habe ich auch schon gedacht, aber weist du auch wie man den Div über die ganze Seite bekommt?

Danke auch für deinen Tipp. Werde ihn bei Gelegenheit umsetzen 

Alex S.


----------



## SpiceLab (10. Mai 2012)

Alex S hat gesagt.:


> aber weist du auch wie man den Div über die ganze Seite bekommt


Das erledigt der Quellcode aus dem genannten Beitrag. Siehe auch meine kurze Erläuterung incl. meinem nachgereichten Tipp, der bei scrollfähigen Seiteninhalt seine Wirkung zeigt:



spicelab hat gesagt.:


> eine [...] DIV-Ebene  [...], die den Viewport in Breite und Höhe vollständig ausfüllt [...]
> 
> [...]
> 
> Noch ein Tipp: statt *position:absolute* wählst du  in dem CSS besser *position:fixed* ;-)


----------



## Alex S (10. Mai 2012)

spicelab hat gesagt.:


> die den Viewport in Breite und Höhe vollständig ausfüllt



Ja und wie macht man das?

Alex S.


----------



## SpiceLab (10. Mai 2012)

Steht alles im Code.

Hier nochmal daraus die relevanten CSS-Regeln:

```
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
#LoadMessage {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
```


----------

