Tiling a background horizontally or vertically is really easy, and we’ve had that ability since CSS 1. Since then, even with CSS3, background-repeat has no new options. I’d love if there was an option for degrees of rotation, but as far as I know, there are no plans for such a feature. 

I come across this problem all the time. Say that I have this image:

I can easily tile it horizontally and/or vertically, using this css:

But if I would like it to look like

The usual option is to create an image specifically for this situation. This option ends up being a frustrating part of development but, I’ve found a solution that works pretty well for me.

The CSS solution to this is to use the :before pseudoclass to add a background image, that can then be rotated and translated into position using CSS3 transforms.

There are a few oddities in that CSS that I’ve found that I’ve needed for this technique to look correct

1. I needed to increase the width and height of the :before element significantly in order to cover every edge of the background. Without this, depending on the height and width of my original image, there were gaps around the edges
2. I needed to play around with the translation of the background in order to cover every edge as well. This translation is manually selected for each different background that I use.
3. I needed to set z-index to -1 or else the background would float above all of the statically positioned content on the page

Since I’m using the before psuedoelement here, this is IE8 and above + all modern browsers. I haven’t tried this with selectivizr, but other then the potential flash of unstyled content, there shouldn’t be a reason it doesn’t work.

I have a full example of this technique to replace an entire page background here.  And an example how to replace the background on just a piece of your page here.

I’d love to know if there are other ways to achieve this diagonal tiling of backgrounds. Talk to you all in the comments!