I've got a problem where as background-repeat is bleeding over-top another graphic, unfortunately CSS Masks are not widely adapted; neither is CSS clipping and I've thought about Canvas but same issue with adaption. Any suggestion as to how to solve ?

It would help enormously to see what it is you are trying to do.

 

If possible post a link to what you have so far or do a graphic of what you want to do.

 

The grid goes over the blue line. Where I want it to be clipped is part of the same division with pseduo-element:before:after.

without seeing code it could be just a simple matter of rearranging z-index to move the lines behind the sand (?) graphic

I hope this helps, as these are the two images that are on only one div.

 

The grid image is what I'm having problems with, I tried adding a z-index to either rule prior to this thread, that solution simply removes the grid image completely which I don't want. I want where the bg_tutimage begins that the grid image is clipped.

#inner::after {

    background-image: url("bg_tutimage.gif");
    background-repeat: repeat;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0.04;
    position: absolute;
    right: 0;
    top: 0;
}
#inner::before {
    background-image: url("grid.png");
    background-repeat: repeat;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0.15;
    position: absolute;
    right: 0;
    top: 0;
}