After looking around online, attempting to sharpen my google-fu, I couldn’t find any real cross browser implementations of getComputedStyle().getPropertyValue().
I was able to find two options, both of which make the same mistake when it comes to camel casing of properties in < IE9.
Sadly, IE expects the camel cased version of the CSS property name, i.e. “marginTop” instead of “margin-top”. Every other browser that supports window.getComputedStyle or document.defaultView.getComputedStyle, uses the hyphenated syntax. I have chosen to have this script expect hypenated css properties, but it could easily be extended to accept either format.
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
- 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
- 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.
- 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!
