The trend of large photographic backgrounds has become very popular in recent years. The improvement of Internet connections has allowed more data transfer per second, which means images can load a lot quicker in real-time. There are also plenty of open source scripts out there for generating cross-browser support using fixed photo backgrounds.
In this guide I want to discuss a few trends and possible techniques for creating responsive image backgrounds. There are more than enough examples we can look into which all demonstrate a unique method for website interfaces. Even consider the possibility of sliding background images or animated video BGs. As frontend dev techniques become more consolidated it will be easier to build these very complex layout styles with fewer and fewer lines of code.
Adapting the User Interface
One great use of responsive background images would be to wrap around the UI elements in your page. This is common in design portfolio layouts, and also in smaller landing pages such as mobile applications. The webpage for Fifty Three app uses this exact technique which displays an iPad in the background.
You can then play a small demo video right from the iPad screen which is embedded through Vimeo. What is neat about this example is how the photo really is fully responsive, and you can adapt the browser window to fit any width/height. All of the text and app store links will read just perfectly.
It is also worth noting how each page in the website is following the large responsive background technique. As you browse through their navigation links at the bottom you’ll catch a different photo embedded into each page. Some examples include the blog, company info, and jobs sections of the website.
Responsive Photo Slideshows
Believe it or not we could push the large photo technique to include types of dynamic content, as well. There are some jQuery plugins which allow fullscreen image slideshows using just a few lines of code. We can see a fantastic example on Royale’s homepage which features many of their past client work.
Being a creative person myself I still vouch for the enormous progress we have seen by other designers in the field. Many of the portfolio and studio websites I find online are still the best examples of newer design trends. And I feel that Royale demonstrates this slideshow effect in a brilliant yet elegant manner.
Similar to the example above I just had to reference this next website as a related case study. Ben Thomson Photography is the online portfolio showcase of Ben Thomson. The homepage layout begins with a background slideshow of panning images he has taken from previous clients.