Tileable

Published September 24th, 2013
Category Blog, Code, Labs


I’ve been tinkering a little with a tileable background and wrapper element for my webpage the last couple of days. I haven’t edited the HTML and CSS in my frontend to reflect the changes yet.

The idea is to have a wrapper that “wraps” the content of the page (solid background) and a tiling background image that will repeat along with the height (dynamic) of the page behind it. I’ll test out the code a little later and see if it works out with the rest of the functions on here. I’m worried about it crashing a little with the automatic resizing of the width (especially for mobile browsers).

So to break it up

I want the wrapper to
– auto-adjust center according to how wide your browser window is
– use a given percent of the browser width
– adjust height to the content displayed whenever, meaning if the page pushes content down the wrapper extends into that

I want the background-image to
– tile “endlessly” in both directions

Example of how it displays.

And the tilable background image

tri

labthing