inFureal

@media screen and (max-width: 1024px){
.services__item{
width: 100%;
}
}
@media screen and (max-width: 768px){
.services__item{
height: 310px;
}
}
@media screen and (max-width: 414px){
.services__item{
flex-direction: column;
}
}

<div class "fon2">
<code lang="css">
</code>
</div>

.fon2 {
  background-image: url('../img/1.jpg');
}

div {
  max-width: 100%;
}

* {
    box-sizing: border-box;
}

.box-blog {
  position: relative;
  z-index: 1;
}
.box-blog:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url(../img/shop.png) 0 0 repeat;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

<div class="your-div"><img src="http://your.image/"></div>

.your-div{
    height: 500px;
    overflow: hidden;
}