Large Background Images in Web Design: Tips and Examples

By . Filed in Web Design

Big background images are extremely trendy in modern web design. You will find dozens of creative examples around the web which illustrate this technique. Consider the idea for captivating landing pages, portfolios, as even company websites are using specialized full-screen background photos.

In this article I want to put together a few solid techniques for building big, oversized background images. This may be accomplished through basic CSS3/CSS2 techniques, or by using some open source third-party jQuery plugins. There are no right or wrong answers, just varying levels of support in older legacy browsers.

Dig through this collection of riveting development techniques and see what you can put together.

CSS Tricks of the Trade

To get us started I would like to introduce a very helpful article posted on CSS Tricks which outlines many of these ideas. The simplest solution with the greatest level of support is through CSS techniques. I have found that the CSS3 method will work properly in most common browsers, and there are even hacks for handling older versions of Internet Explorer.

Let’s take a peek at the CSS3 code for placing these background images at full 100% responsive width. I’ll be using the codes from Chris Coyeir’s article to explain how easily this can be implemented.

html { 
  background: url(http://media02.hongkiat.com/oversized-background-image-design/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale')";
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale');
}

The HTML element is a much easier target than the body since we know everything is wrapped inside. Then we apply the background image with a full center position, no repeat and fixed as you scroll. The newer CSS3 background-size property is what applies all the positioning magic. Utilizing the many vendor prefixes will give us a wider range of support as well.

It should be noted that the filter properties have not always played nice inside IE. Some people report having issues with scrollbars or selecting text on the page. To get around this bug you can try applying the background image codes onto an inner div inside the body, set to a full 100% width/height.

CSS2 Fallback

Surprisingly I have found that more browsers support the CSS3 method than any other styles. But I will still offer this secondary method using regular CSS properties on an img element.

I feel the biggest nuance with this method is when right-clicking on the background it will bring up the context menu as if you are clicking on an image, not clicking on a webpage. This may get annoying to visitors who cannot figure out why the menu is different. But if you are struggling with the CSS3 method and still wish to avoid JavaScript, then this may be your only option.

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

The image tag should be located directly inside your body before opening any other divs. The image will fall into the background and all your other content should wrap around. This is known to work in all major browsers (Safari / Firefox / Chrome / Opera) but isn’t as well supported in IE6-7.

JavaScript Solutions

Let’s move into the more dynamic codes using jQuery plugins instead of typical CSS. These are often written with flexibility in mind, so mobile smartphones and responsive layouts should be a #1 priority. jQuery is also a fairly common language which most web developers are somewhat familiar.

There are possibly dozens of jQuery plugins to choose from, but I’ll be presenting three of my favorites. Most of these code libraries are very easy to implement and setup within a new website. All of them are hosted on Github and thus present an excellent open source solution. This means you can expect fewer bugs and greater support as more developers contribute their knowledge to each plugin’s codebase.

Backstretch

Some developers have seen the name Backstretch appear on other websites and blog articles. This is a very popular plugin and has been around for almost 3 years, since December 2009. The developers have been eagerly updating this plugin, and now it even supports image slideshows along with static background images.

To implement the code yourself just download a copy of the script and attach it to your webpage using a script tag. If you want to use CDN cloud hosting try this cdnjs link instead. Then we just need to open another script tag and type a single line of jQuery code like this:

$.backstretch("http://media02.hongkiat.com/oversized-background-image-design/bg.jpg");

The code library was written to be a single-line execution. This makes Backstretch super easy for even non-technical web developers to get working. You will not need to apply any extra HTML markup or other CSS properties. And the images will behave as 100% responsive to the browser window.

  // Duration is the amount of time in between slides,
  // and fade is value that determines how quickly the next image will fade in
  $.backstretch([
      "http://media02.hongkiat.com/oversized-background-image-design/photo1.jpg",
      "http://media02.hongkiat.com/oversized-background-image-design/photo2.jpg",
      "http://media02.hongkiat.com/oversized-background-image-design/photo3.jpg"
  ], {duration: 3000, fade: 750});

The code above is slightly altered to support a slideshow in the background. You have the ability to list as many image locations as you want to display inside the slideshow, followed by two bits of metadata. The duration value is the amount of time in-between slides, coded in milliseconds. The 2nd fade value will determine how many milliseconds are required to fade from one image into the next.

Vegas

The Vegas Background jQuery plugin is another excellent choice for web developers who are looking for a quick implementation. What makes Vegas stand out on its own is that you have more options for background customization. It is actually possible to setup an overlay effect using stripes or dots on top of your photo. A demo can be seen on the Vegas documentation setup page which uses a speckled overlay effect.

You will need to include a copy of the Vegas JS and CSS files which can be found on the Github page. This plugin may work using just a single line of code, but there are so many possible customizations in comparison to Backstretch. Check out their background documentation page to learn a bit more. For now let’s build a simple demo example in code:

$.vegas({
  src:'/img/background.jpg'
});

Believe it or not we can also use just 1 single line or block of code to get the same effect as before. Vegas allows further customization if you want to build an image slideshow, or add any overlay texture. On the overlay docs page you’ll notice a series of pattern swatches which you can demo right there. This is one great example of the benefits to image overlays using Vegas, in comparison to other jQuery plugins.

Anystretch

My final jQuery solution is a plugin called Anystretch which is actually a fork of the Backstretch plugin. There are minor differences which may help developers looking to update the background image, or to apply BGs onto various page elements.

This script works the same as before where you’ll need a copy of jQuery and a copy of the anystretch files. Then just setup the syntax as I have below, placed inside another set of <script></script> tags. Note the speed parameter determines how quickly the image will fade in after it finishes loading, measured in milliseconds.

  $.anystretch("http://media02.hongkiat.com/oversized-background-image-design/bg.jpg", {speed: 150});

Live Demo

This method will also work perfectly on divs or other elements found inside the body. Each BG photo will still resize at the proper aspect ratio and appear fully responsive on mobile browsers. The demo code below is placing a background image on a div with the ID of #leftbox.

  $('#leftbox').anystretch("http://media02.hongkiat.com/oversized-background-image-design/bg.jpg", {speed: 150});

The Final Solution?

Ultimately we live in an era with more than one solution to semantic web problems. Frontend developers are constantly pushing for greater support and figuring out new browser hacks. This is perfect for a community of designers who are interested in quickly applying these techniques onto webpage layouts.

I can’t specifically inform you on the best solution because it will change with each website. But I am still a big advocate for HTML5/CSS3 and I feel the first CSS3 solution is enough for any modern website. Although admittedly, many of the jQuery plugins work perfectly and will even be supported in browsers which don’t understand CSS3 properties.

In the end it all comes down to your own personal choice and what you feel works best for the project. Test out 2 or 3 of your favorites and see which ones stand out from the crowd.

60+ Websites With Oversized Background

Along with the methods above I want to provide some examples for design inspiration. Web designers are often familiar with big background layouts, but it’s tough recalling some exact domain names.

In this showcase I have put together 60+ examples of websites using big oversized background photos. Check out the layout styles and see how you can mimic a similar technique in your own projects.

Hiut Denim

Hiut Denim website design company

Kerem Suer

San Francisco freelance designer Kerem website

Guns ‘n Roses

Guns n Roses band music website photos

H-Art

work design products branding studio website layout

Cayena Agency

hot chili peppers website layout photography

Design House Stockholm

interior design stockholm sweden website layout

Martin Costa

martin costa website big photos background

Davidia Interior

furniture interior design studio website

August

Internet marketing design branding agency website

Daniel Filler

Daniel Filler website portfolio layout

Whitmans

New York City hamburger shop website layout

Tim Roussilhe

Tim Roussilhe website big photo backgrounds design

Tag Interactive

big video background effect TAG agency website

Anna Safroncik

Anna Safroncik personal website layout big photo backgrounds

DOJO Studio

German design studio agency website layout

Encandle

design studio agency website layout

CreativePeople

creative people studio design website agency

Twelve Restaurant

restaurant food bar cooking dinner website layout

de Certeau & Associates

architecture website layout studio agency big photos

Medis Food & Bar

food restaurant website layout big image backgrounds

Yan Studios

full screen big website background photos yan design agency

Blind Barber

classic retro photography background web design Blind Barber

Reflexion Weddings

wedding europe website layout big photography

CGRendering

architecture website studio agency portfolio

Shelley Sandzer

Shelley website Sandzer restaurant big photo layout

Marcus Thomas

idea design agency website layout big photos

Biamar 2012

fashion studio design website big photos background

Inzeit

Inzeit website studio mobile retail layout

Blitz SF

San Francisco California Blitz design studio website

Au Petit Panisse

fancy restaurant bakery layout au petit panisse 2012

Ringve Media

Ringve Media website layout big photo background China

Shaw and Shaw Photography

Shaw Photography website layout big photos background

Werkstette

Werkstette website layout big photos background css html

Salt Surf

retail website layout salt surf california ocean

Pablo González

pablo gonzalez personal website director

David Mullett

David Mullett portfolio photo website layout

Moxie Sozo

moxie sozo website layout big photos background

David Nolan

David Nolan New York photography portfolio

Flaek

Flaek footwear website layout design big backgrounds

Pizzaza

Italian Pizzaza website layout big photos background inspiration

500 Watt

design studio agency website layout 500watt

Dolphins Communication

Dolphin Design studio website agency background photos

Top Dollar Photographers

top dollar photographers website layout design creative

Top Dollar Models

agency modeling Top Dollar Models website layout

Rebecca Barry

writer and film director Rebecca Barry website layout 2012

Healing Histories

Healing Histories website New Orleans informational layout

Goliath Sportswear

Goliath sports sporting website design big photos background

Onside Sports Agency

Onside Sports agency website studio classic

Jason Miller

Jason Miller studio webste layout design creative

Display Creative

Italy Display Creative agency studio website layout

Ines Papert

big photos background website layout ines papert

Airwalk

Airwalk skateboard branding design website layout

Hasse Bronten

Hasse Bronten website comedian German background photos CSS

Ines Maria Gamler

pure pleasure design Ines Maria Gamler website layout

Killer Brigade

online shop clothes fashion website layout big photos background

35mm Design

35mm design studio big photos background website layout

Spring/Summer

Spring Summer website layout design inspiration

Sandlewood Homes

Sandlewood interior homes website portfolio layout

Matt Porterfield

Matt Porterfield photography portfolio website layout

ASAA Architecture

asaa architecture interior design website layout studio

AyerViernes

Ayer Viernes website portfolio agency background photo

ah asociados

asociados interior architecture Spanish website layout design

Author:

Jake is a user experience designer for both web and mobile platforms. Having over 4 years of freelance projects under his belt, he frequently writes articles on topics of modern design trends and social media. You can check out some of his work on Dribbble or follow his tweets @jakerocheleau.

Advertisement