Jump to content


This topic is now archived and is closed to further replies.


Image Pattern Overlay

Recommended Posts


I'm essentially trying to accomplish this:

Notice how the image on the top of the page has grey grid overlaying it.  They accomplish this by placing a div within a div that contains the image of the grey lines.


However, in Pagelines I've put the full width image and then I'm trying to accomplish this with CSS alone (as we can't put in an extra div)... here is what I have:


.class:after {
background-image: url('http://mysite.com/wp-content/uploads/call-to-action-pattern.png') repeat;
  top: 0;
  left: 0;
  position: absolute;
  z-index: -1;
  content: "";

But it isn't working... any thoughts?

Share this post

Link to post
Share on other sites



I did something similar by simply using the section's background image option, and tiling a semi-transparent image.  Then, using CSS (applied to the custom class I created for the same section), I applied a background color.  You can see the effect under the RevSlider at http://www.epicurusgroup.com


You could create the same situation, and instead of applying a color, as I did (a light blue), you could apply a multi-color, large image without tiling. In this way, you'd achieve one class containing the color-background image, and then the section making another div (as a top layer) for the grid pattern.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites