CSS: Comment faire pour créer des lignes ou des points sur une image de fond?

Je ne sais pas le nom de l'effet, mais voici un exemple:
http://www.uiueux.com/wp/flowfolio/

Si vous regardez attentivement, vous voyez un fond propre de l'image - comme il ressemble un deuxième arrière-plan - avec des points. Les points ne font pas partie de l'image.

  • Quel est le nom de cet effet?
  • Comment créer un arrière-plan avec des points?
  • Cela peut aussi être fait avec des lignes diagonales à la place des points?

Merci beaucoup!

OriginalL'auteur Arjen | 2013-01-10

  1. 10

    C'est juste une minuscule, semi-transparente de l'image d'arrière-plan qui obtient en mosaïque sur l'arrière-plan de l'image:

    http://www.uiueux.com/wp/flowfolio/wp-content/themes/flowfolio/img/bg_mask.png

    Il vous suffit de créer un élément et étalez-la sur votre arrière-plan:

    #dots {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-image: url('dots.png');
    z-index: 1;
}

    Assurez-vous que le z-index de l'élément est plus élevé que le z-index de l'arrière-plan, mais inférieure à la z-index du contenu. De cette façon, elle ne couvre pas votre texte.

    OP, assurez-vous que vous avez la bonne z-index.
    WOW c'est comme 1 pixel lol

    OriginalL'auteur Blender

  2. 3

    Que le site utilise un div avec un fond transparent. C'est donc un arrière-plan sur la page avec un autre fond répétée sur elle. 

    <div class="back_mask"></div>

.back_mask {
    z-index: -990;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(img/bg_mask.png);
}
    +1 pour l'utilisation de la source de la page

    OriginalL'auteur MushinNoShin

  3. 3

    Les autres me battre pour elle, mais c'est juste une image positionnée sur l'autre image.

    Voici ma solution pour l'image

    HTML

    <div class="dots">
  <img src="http://placekitten.com/300/300" />
</div>

    CSS

    .dots {
  position: relative;
  display: inline-block;
}
.dots:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(http://www.uiueux.com/wp/flowfolio/wp-content/themes/flowfolio/img/bg_mask.png);
}

    De le faire avec une ligne diagonale il suffit de changer l'image d'une ligne diagonale qui peut être carrelée

    OriginalL'auteur georgephillips