CSS: How to create a lines or dots over a background image?

Question

I don't know the name of the effect, but here is an example: http://www.uiueux.com/wp/flowfolio/

If you look carefully then you see a clean background image with - as it looks a second background - with dots. The dots are not part of the image.

• What the name of this effect?

• How to create such a background with dots?

• Can this also be done with diagonal lines instead of dots?

Thank you very much!

Solution 1

It's just a tiny, semi-transparent background image that gets tiled over the background image:

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

You just create an element and stretch it over your background:

#dots {
    position: absolute;

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

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

Make sure the z-index of the element is higher than the z-index of the background, but lower than the z-index of the content. That way, it doesn't cover up your text.

Solution 2

That site uses a div with a transparent background. So it's one background on the page with another background being repeated over it.

<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);
}

Solution 3

Others beat me to it but it is just an image positioned over the other image.

Here's my solution for the 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);
}

To do it with a diagonal line just change the image to be a diagonal line that can be tiled