April 10, 2014

WordPress Per-Page CSS, And Background Image Pattern Overlay

Did you know that you can apply custom CSS code to individual WordPress pages? It’s a nifty little trick to help you personalize your WordPress theme. On my photography blog, I wanted to have a custom header background image with a pattern overlay for a specific page (“The Street Collection“). The theme I’m using does not offer any ability to do this. I could used the “Background Manager” WordPress plugin, and in fact I tried it, but it didn’t play nice with my theme. But then I remembered you can create custom CSS per page, so I decided to do this the good old-fashioned way. Here’s the custom CSS code I used on my photography blog (edited to keep it generic):

body.page-id-123 #header {
background: url('https://blog.mywebsite.com/wp-content/uploads/2014/04/background1.jpg') no-repeat;
display: block;
position: relative;
z-index: 50;

The first line is the key (specifically “page-id-xxx”), that is where you are identifying the WordPress page id that this custom CSS will apply to. Obviously you will need to adapt this to your blog and theme, replacing the CSS id selector (#header) where necessary, and of course using the page id of the page you want to customize. All the other CSS properties in the above code are specific to the customization I wanted to make to my page, except “z-index: 50;” which I will talk about in a moment.

Now here’s the fun part. Let’s say you use the above code similar to how I’ve used it, adding a custom background image to the header of one specific page. But now you want to add a pattern overlay (say dots, or diagonal lines) over top of your background image. To do that you first need a pattern image with a transparent background. You can build your own and download it in PNG format using Patternify. This is what I used to create the dotted overlay on the custom page on my photography blog.

Now you need to add some additional CSS code, again for this one specific page id, that loads the transparent PNG image over top your existing background image. Here’s the code for that:

body.page-id-123 #header:after {
content: "";
background: url('https://blog.mywebsite.com/wp-content/uploads/2014/04/overlay-pattern.png') repeat;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;

The key here is the “:after” CSS pseudo class. Any properties applied via this pseudo class will apply “after” the main CSS properties apply for this id selector (#header). For this specific example, it is important to use the “top, left, bottom, right, position, and z-index” properties as specified in the example above. And if you noticed, the z-index was set to “50” in the previous code example. You might need to play with that depending on your theme, but a higher z-index number is likely necessary on the CSS code that loads your main background image. Before changing that, all I saw was the pattern overlay. I arbitrarily picked “50” and it worked with no side-effects, so I left it as is.

You might be wondering what the content: “”; property is for. If you want to add a text overlay, that is where you can do it, just add the text between the quotes. Based on the other CSS properties in this code example, that text is going to show up in the extreme top-left corner. You would have to customize the coordinates to suit your needs. Since I was thinking I might add some custom overlay text via CSS to one of my pages in the future, I decided to leave that bit of code there for future reference.

Please share your thoughts