Does anyone know how I make this effect in the background of this div?

Navigation
1

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

Can anyone tell me?

    
asked by anonymous 28.02.2018 / 23:55

3 answers

4

The image that allows you to make this grid is one point only, with some transparency:

link

It is placed above as overlay 

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

E stands for the original repeat image based on the default value of background-repeat which is repeat . This value forces the repetition both in height and in 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" it indicates is actually a black background with 50% transparency over it. You can incorporate this in a number of ways.

See an example for this effect too: 

.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 linear-gradient if you want to be more creative.

    
01.03.2018 / 00:17
3

You do not need an image to do this. (other than the background image itself) the rest of the image to do basically with linear-gradiente and repeating-linear-gradient

With CSS3 you can have multiple background-image in one element! You can read more about this here: link

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

The big advantage here is that you can use the size you want in the boxes working with the % can even change the color and the opacity easily . And still avoids problems with image request or image path error.

See the examples below: (with larger squares and less 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: Taking the image of the background has no other. Here are some practical examples of repeating-linear-gradient link

    
01.03.2018 / 13:22
2

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 point image should be transparent background

    
01.03.2018 / 00:10
MYSQL relationship between tables How to determine if two random values are close?