Applying an overlay pattern to background image files

Hello.

I would like to apply an overlay pattern to the background images used in the MusicState template (i.e. dark_bottom_bg.jpg, bottom_bg.jpg etc).

For the Image Show on the header, I've used the following custom code in the override.css

.gkIsWrapper-gk_musicstate figure > div:before {
background: url('../images/pattern.png') repeat 0 0;
content: "";
display: block;
height: 100%;
position: absolute;
width: 100%;
}

Can I apply something similar to override.css to add a pattern on top of the background image files?

Thanks

I don't think so, first of all the height: 100% will not work in this case. Probably the easiest way is to create background with added pattern.

You mean, do it in a graphics editor like Photoshop?

I've seen this pattern applied to backgrounds on other web sites so is the layout preventing a solution here?

The problem is with the height property which as you will see will not keep the part height - there is problem with the layout or something like that, it is just not working in this way in CSS.