Produxion

I’ve been working on a new design treatment for the North website. Since the project has changed so dramatically since its inception earlier this year, we’ve introduced a new logo, and in turn will be launching a reboot of the website very soon.

North is a series of events and activities taking place throughout 2009 and 2010 aimed at inspiring creative professionals to do things differently. We’ll be announcing more details, and info on how to get involved when the website launches.

While we weather the transition from the old (lacklustre, temporary) site to the new, it’s necessary for us to put up one of those really annoying “under construction” messages. I wanted to keep it brief (all efforts are on producing a fully fledged website with lots of whizz-bangs) but still pleasant to look at.

So, I ended up throwing a few web conventions out of the window and implementing a “stretchy” design. You can see the current holding page here, and if you resize your browser window, you’ll see the whole background resize with it.

“Holy heck Phil, how the devil could you conjour such wizardry, when CSS doesn’t support scaleable backgrounds?” I hear you cry. Well, lawks, it was quite easy really: I cheated.

The background is actually just a div containing an img with it’s CSS dimensions set to 100%. Backgrounds don’t stretch, but elements do, y’see.

Then I bunged in a PNG fix, so that the logo could be rendered with an opaque PNG file, set up some quite simple rules for centering everything, and there you go: a nice stretchy page which goes against some CSS conventions, but looks nice, is semantic(ish) and accessible.

here’s the CSS code for this witchcraft, if you’re interested

body {
  margin: 0;
  padding: 0;
}
#background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 0;
}
.stretch {
  width:100%;
  height:100%;
  vertical-align: middle;
}
#content {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -139px;
}