May 15, 2012 • by
Colin Vernon
I was recently reminded by @jkudish that it’s time to start thinking [well ahead] about WordCamp Montreal in August, and since we sponsored and spoke last year I’d love to do both again. Checking out the WordCamp Montreal apply to speak page, I see myself and Joey giving our talk about custom content types, plus a cameo by WCMTL organizer Jeremy Clark [sitting down at left].
Great memories, and we’re looking forward to another great event this year.
May 2, 2012 • by
Colin Vernon
We love awesome, bold messaging in a slick and impressive design, especially if it adapts smartly and looks great on screens from massive to mini [ie. mobile]. That’s exactly why we love the site recently launched by Montréal creative marketing agency N/A Creative, a collaboration between Stresslimit [UX/architecture/tech], Triboro Design [visual design], and of course N/A themselves providing content, structure and direction as the site is about them after all. continue reading
April 13, 2012 • by
Wes Hatch
I was recently tasked to implement a site where the home page had a series of rotating full-screen backgrounds. The quintessential example that immediately sprang to mind was the GoToChina site, while Chris Coyer has a series of techniques he’s rounded up, too. However, these utilize only a single image.
Here’s the markup I used:
<div id="bg">
<article id="slide-1" style="background-image: url('space1.jpg');">
<!-- other fun content here -->
</article>
<article id="slide-2" style="background-image: url('space2.jpg');">
<!-- other fun content here -->
</article>
<!-- etc... -->
</div>
Here, the background images are assigned with an inlined style. I’m only doing this because each image is dynamically pulled from a database and assigned at page load. You could also assign it in the css using the article’s id if you wished.
With CSS3, getting the background-image of the <article> element to center and scale is straightforward. The image even keeps it’s aspect ratio:
#bg {
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:-1;
min-width:768px;
overflow:hidden;
}
#bg article {
width:100%;
height:100%;
overflow:hidden;
position:absolute;
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Neat. What this does, then is makes sure that the image always covers the background, while keeping it centered. The magic that allows this to happen is within: background-size: cover;
The slides are now all sitting on top of each other, and they may be rotated through using fades or side-scrolls, or any other techniques you wish via a little javascript.
Sadly, and not-altogether-unexpectedly, this doesn’t work in IE prior to version 9. There is a nice workaround using a bit of jQuery:
if ( $.browser.msie ) {
$('#bg article').each(function() {
var pattern = /url\(|\)|"|'/g;
var src = $(this).css('background-image').replace(pattern,"");
var id = $(this).attr('id');
$('head').append("<style>#slide"+ id +"{progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='scale'); -ms-filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' "+ src +"', sizingMethod='scale')';}</style>");
});
}
This will rip the image src’s out of the background-attribute, and use them in an IE-only filter The nice thing about this approach is it’s simplicity. No extraneous markup or extras, and it performs well.
