Does anyone know how I do this effect on the background of this div?

Question

Hello, I would like to know how I make this effect similar to that of this image, with the shadow and the comics

Can anyone tell me ?

Answer 1

The image that allows you to do this checkered feat is a point only, with some transparency:

https://static.musiocdn.com/img/dot-overlay.png?45a8ea7a65f7

She’s put on top like overlay

<div class="dot-overlay"></div>

And it’s above the original repeat image based on the default value of background-repeat that is repeat. This value forces the repetition both in height and width giving the idea of a grid.

Replicating this effect:

.fundo {
  background-image:url(http://c1.staticflickr.com/3/2912/13981352255_fc59cfdba2_b.jpg);    
  background-size:cover;
  width:100%;
  height:300px;
}

.overlay {
  background-image:url(https://static.musiocdn.com/img/dot-overlay.png?45a8ea7a65f7);
  width:100%;
  height:100%;
}

<div class="fundo">
  <div class="overlay">
  </div>
</div>

The "shadow" that indicates is actually a black background with 50% transparency on top. You can incorporate this in various ways.

See an example for this effect as well:

.fundo {
  background-image:url(http://c1.staticflickr.com/3/2912/13981352255_fc59cfdba2_b.jpg);    
  background-size:cover;
  width:100%;
  height:300px;
  position:relative;
}

.overlay {
  position:absolute;
  background-image:url(https://static.musiocdn.com/img/dot-overlay.png?45a8ea7a65f7);
  width:100%;
  height:100%;
}

.sombra {
  position:absolute;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.5);
}

<div class="fundo">
  <div class="overlay"></div>
  <div class="sombra"></div>
</div>

You can even use a linear-gradient if you want to be more creative.

Answer 2

You don’t need an image to do this effect. (Except the background image itself) the rest of to do basically with linear-gradiente and repeating-linear-gradient

With the CSS3 you can have several background-image in one element only! You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds

In the case of the example you show we will use 4 backgrounds in one <div> one will be the background image, another will be the shadow, and the other 2 to make the horizontal and vertical lines.

The great advantage here is that you can use the size you want in the comic books working with the repeating-linear-gradient even can change color and opacity easily. And still avoid problems with image request or error in image path.

See the examples below: (with larger and smaller squares and with different color and transparency)

.efeito1 {
    width: 100%;
    height: 150px;
    overflow: hidden;

    background-image: 
    repeating-linear-gradient(90deg, transparent 0px, transparent 3px, rgba(0, 0, 0, 0.15) 3px, rgba(0, 0, 0, 0.15) 4px), 
    repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0, 0, 0, 0.15) 3px, rgba(0, 0, 0, 0.15) 4px),
      linear-gradient(to right bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.25)),
      url( http://placecage.com/800/300);

    background-position: bottom, left, top left, center;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: cover;
}

.efeito2 {
    width: 100%;
    height: 150px;
    overflow: hidden;

    background-image: 
    repeating-linear-gradient(90deg, transparent 0px, transparent 9px, rgba(255, 0, 0, 0.9) 9px, rgba(255, 0, 0, 0.9) 10px), 
    repeating-linear-gradient(0deg, transparent 0px, transparent 9px, rgba(255, 0, 0, 0.9) 9px, rgba(255, 0, 0, 0.9) 10px),
      linear-gradient(to right bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.25)),
      url( http://placecage.com/800/200);

    background-position: bottom, left, top left, center;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: cover;
}

<div class="efeito1"></div>
<br><br>
<div class="efeito2"></div>

OBS: Apart from the background image there is no other. Here are some practical examples of repeating-linear-gradient https://www.w3schools.com/cssref/func_repeating-linear-gradient.asp

Answer 3

An example:

<div style='background-image: url("image.jpeg"); background-size: 100% auto;'>
    <div style='background-image: url("point.jpg"); width: 100%; height: 700px;'>
    </div>
</div>

Note: the dot image should be with a transparent background