Ajouter une couverture de fond sombre au site Web existant

Question

Je construis un site Web et je voudrais ajouter une image de fond sombre semi-transparente pour couvrir l'arrière-plan lorsque l'utilisateur remplit un formulaire. Je me demande comment vous feriez cela car ma mise en œuvre actuelle ne fonctionne pas.

Actuellement, lorsque j'essaie de l'implémenter, l'arrière-plan semi-transparent n'étire pas horizontalement toute la largeur de la page et semble créer un fragment indésirable d'espace vertical au bas de la page. Ma solution existante consiste à créer un div et en utilisant position:relataive; top:-1100px; left:0px; pour placer cette div exactement où je veux.

Sur le site Web, cet arrière-plan semi-transparent est situé sur la quatrième et dernière page nommée "Nous trouver". En cliquant sur le gland étiqueté «Commentaires» va révéler un formulaire. Actuellement, il est difficile de lire le formulaire en raison de l'arrière-plan occupé, donc je voulais utiliser une couverture d'arrière-plan semi-transparente pour «brouiller» tout sur cette page actuelle, sauf pour le formulaire.

Démo de avant que je tenté d'ajouter le fond semi-transparent: http://www.sfu.ca/~jca41/stuph/it/website01/template.html

Démo de après ma tentative d'ajouter le fond semi-transparent: http://www.sfu.ca/~jca41/stuph/it/website02/template.html

Answer 1

Modifier le CSS pour #cover:

#cover { 
    position:absolute; 
    top:0px; 
    left:0px; 
} 

Answer 2

Vous avez l'indice z de div div plus que le div gland. Réglez l'index z de tassel div à 120 et vous avez déjà une couverture avec z-index 115. Vérifiez si cela fonctionne.