Background inage overlay in rows


#1

I was wondering if there is a way to add an overlay over my rows that have background images. I love the effect on the header and would love to have it with my other images. I’ve been attempting to figure it out on my own, but I am defeated.

My site is here: http://www.pretzcon.org/


#2

Yeap, it can be done, though you would have to check for browser compatibility.
Add this for the row IDs you want:


#pg-2040-6::before {
   background: url('http://www.pretzcon.org/wp-content/themes/moesia/images/pattern.png');
   width: 100%;
   height: 100%;
   position: absolute;
   z-index: 1;
}
#pg-2040-6 .panel-grid-cell {
   position: relative;
   z-index: 2;
}

This will apply for the Tournaments row.


#3

Thank you! I had tried that route, but I didn’t have the CSS quite right. This is still a little off. It is applying the overlay to the rest of the page after that row. I’ll keep fiddling with it.


#4

Here is what I ended up with. It’s not perfect. The overlay scrolls, but if I set it to fixed instead of absolute, then the overlay continues through the rest of the page.

#overlay2 {
	background: url('images/pattern2.png');
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	opacity: 0.4;
	left: 0px; 
	top: 0px; 
}
#pg-2040-6 .panel-grid-cell {
   position: relative;
   z-index: 2;
}

I added this to the beginning of my text widget:

<div id="overlay2"></div>