From Street Show. Mix 1
Category Archives: Internet
Grand illusion
This is the background image from David Copperfield’s website. It is one of the best and most interesting I have seen since I started collecting them for the Bg_img project. What sets it apart is the combination of different types of background in one glitzy show tune of an image. It has everything: a subtle repeating floral pattern that fades into a solid grey body; a halo effect above the cut illuminating the headline and featured content; subtle use of drop shadow and Gaussian blur; fixed width middle column and a second halo in the footer mirroring the one at the top.
The other thing of note is how the image serves as the content of the site, rather than the decoration behind it. The three stacked images on the right for example – about; pop culture and charitable work – aren’t just place holders, they lay underneath three absolutely positioned anchor links and smudge the line at the edge of ornament and function. Other than the critic quotations, all the visible content is contained in a single .jpg held in the body tag.
Famously, David Copperfield made the Statue of Liberty disappear; isolating the background image from his site, it looks as though he has waved his hand, distracted his audience with smoke and mirrors and made all the content disappear too. While the same can be said for most background images seen in isolation, this one is more than just a decorative pattern, it is a negative space. You can see where the content was and exactly where it should be. Not only is there a void half way down on the left where there was once text, the hyperlinks have been magiced away too. The invitation to play the biographical “About the Man” video is just an illusion, as is the temptation lower down the page to enter paradise. Mouse over either and the cursor no longer turns from arrow to white glove.
Static divider (blue)
Squared divider
Bg_img Hollo
I was asked by Andrea Magnani to create a piece of work for a new project of his called Hollo, a website hosting a collection of designs to be printed, on demand, to pieces of furniture. This is it. This edition of Bg_img takes the form of a piece of furniture.
The pattern for this design is a collage of the background gradients of more than 50 websites. The gradient background image is a .jpg typically 1 or 2 pixels wide and approaching a thousand long, repeated along the x-axis. It is also approaching the status of anomaly; it would be in danger of extinction were it not for the garish non-compliant CSS quirks of Internet Explorer. Where otherwise the background image has become more refined, shifting from early rough textures and garish psychedelia to the smoother, more polished surface of the gradient, the gradient itself – the high waterline of Modernism and web-design – is in the process of being usurped by a few lines of CSS code. This Bg_img acts as monument and archive to the gradient as both object and ornament.
Bg_img Nature
Websites styled as a sheet of paper on a long scrolling desktop make for an uncomfortable ride. Inverting the desk by 90 degrees to have it display on a screen invokes an odd, gravity defying, sensation of queasiness. Making a site that resembles a virtual work area by wrapping every part of it in heavy physical metaphor dulls the mind as it repeatedly bangs its head against the outer extremities of literalness.
The desk is usually styled in one of two ways. First is the tidy workspace, second is the untidy one. The first has hard, heavily grained wood between the <body> tags. Paper is laid square in the centre with a hint of drop shadow, the font is most likely Courier to replicate a type writer. Second is a lighter wood and has a separate <header> image probably with mugs, pens, keys and coffee stains. The paper may have a rough edge to indicate a tear and mostly likely one of the corners is dog-eared. Again, there is a hint of drop shadow. Items in the sidebar tend to be represented by post-it notes. There will also be liberal use of a file called paperclip.png and the font should be Comic Sans, but isn’t.
Both desk types are intended to be representative of a singular and private space. A space where the author is shooting from the hip while simultaneously being the place they slave over their masterpiece – a space where the magic happens. Occasionally there will be a polished gem, but your semiotic spider sense should be warning you that this is a site by someone who likes to show their working. You will have a long wait.
My suggestion is that you leave your desk, that you stretch your legs and that you go outside, metaphorically off course. The great expanses of nature, the sky; the sea and the sweeping meadow don’t replicate so well on the internet. Even when tiled to infinity they are flattened and not remotely romantic. The wild unpredictable patterns of nature are contained within a repeated .jpg Photoshopped with a 50% offset. That said, they have their own kind of kaleidoscopic beauty that abstracts and orders in equal measure. Take a deep breath, loose yourself in nature, download it here.
Bg_img tile
Click here for PDF.
Bg_img tumblr
The PDF edition of Bg_img is taking a 1 month sabbatical. In its place, bg_img tumblr. The site will be a dumping ground for some of the more interesting and noteworthy background images I come across during future surfing sessions and perhaps a better way of organising some of the several thousand I have collected already. Thematically it will probably be quite chaotic and added to as and when; I’ll leave attempts at organisation for the PDF’s and then ultimately when the planets are aligned correctly, the book.
One of the benefits of doing things this way is that the backgrounds are presented on screen; so you see them in their original context and you read them as empty spaces as well as formal compositions. The other cool thing is that I can showcase some of the animated backgrounds. Nothing beats looking at animated stars tiled across the screen, trust me. Thirdly, clicking on the link at the bottom of the page (usually) takes you to the background in its original context. A white box with text in it can spoil anything, content is noise.
Bg_img curtains
Curtains. Two decorative stripes of colour either side of an area left empty for content. Typically the central area – the window – is host to the site content with the adjacent columns doubling as either a home for a sidebar or left empty as the site background. Where these differ from traditional backgrounds is that they paint the whole template of the page with one block image. This establishes a rigid semantic link between the image and the content that it hosts. The background becomes in equal parts decoration and definition. The otherwise abstract geometry of the image is built within the framework of an absent graphical user interface which means looking at the background image independently will liberate it of its functionality but not of its context. This in turn means the central area – the window – can never be seen as anything other than a void, albeit an active one. The decorated areas, those framing the window on either side, are the curtains. There is quite possibly a proper or more accurate name for this kind of layout, but I have yet to find it.
The latest edition of Bg_img brings together a collection of 20 of these images that were collected during my travels around the web. It may just be coincidence, but in my experience, when a website has this kind of background image, it is usually considerably more interesting than the content on top of it. Bg_img Curtains, available to download now.
Bg_img stripe
Bg_img stripe is now available to download. The image above is an approximate composite of the average pattern, colour and direction of striped background within the 20 included samples. Once again each image is selected at random from an ongoing and much larger collection and curated in to it on a mixture of whim and aesthetic difference. Factoring in the mood I may have been in the day it was compiled, it is safe to assume that the selections are as arbitrary and representative as possible. The generic striped background is made up of 3 colours at a 39 degree angle with 4 stripes per repetition. The base or dominant colour is white with light grey and light blue stripes.
| Plate | Colours | Stripes | Base colour | Gradient | Direction 1 | Direction 2 | Direction 3 | Weave | Anti-aliased | File |
| 1 | 2 | 2 | pink | n | 45 | n | y | gif | ||
| 2 | 2 | 6 | white | n | 45 | -45 | n | n | gif | |
| 3 | 3 | 3 | white | n | 45 | n | n | gif | ||
| 4 | 2 | 2 | black | n | horizontal | n | n | gif | ||
| 5 | 2 | 2 | mid grey | n | 45 | n | n | unknown | ||
| 6 | 2 | 2 | light blue | n | 22.5 | n | y | gif | ||
| 7 | 2 | 2 | red | n | -45 | n | n | jpg | ||
| 8 | 2 | 2 | white | n | 45 | n | n | gif | ||
| 9 | 3 | 4 | white | n | 45 | n | y | gif | ||
| 10 | 2 | 2 | light blue | n | 45 | n | y | gif | ||
| 11 | 15 | 22 | purple | n | vertical | n | n | png | ||
| 12 | 2 | 2 | white | n | 45 | n | n | gif | ||
| 13 | 2 | 2 | mid grey | n | vertical | n | y | png | ||
| 14 | 2 | 2 | dark blue | n | 45 | n | n | png | ||
| 15 | 4 | 5 | white | n | horizontal | vertical | 45 | y | n | png |
| 16 | 2 | 2 | white | n | 45 | -45 | n | n | gif | |
| 17 | 2 | 2 | white | n | horizontal | n | n | gif | ||
| 18 | 2 | 2 | white | n | -45 | n | n | gif | ||
| 19 | 4 | 8 | light blue | n | horizontal | vertical | y | y | png | |
| 20 | 2 | 2 | white | y | 45 | n | n | jpg |