The Huge Trend – Full Screen Image Websites

April 25th, 2010 Posted in Various

A trend today happened yesterday, but there is no denying full screen images are everywhere on the Internet. In 2010 bigger is better and large background websites having visual impact utilize widely available technology.

Here are links to a few large background site collections:

80 Large Background Websites

70 Beautiful Websites with a Large Background

25 Large Photo Background Websites

While some large background sites depend on a fluid or elastic layout to stretch across the browser viewport, others use large images with a fixed size to produce large backgrounds. Apart from these sites, are sites with full browser background images that stretch with the browser viewport. The question is how you stretch an image without distorting the aspect ratio. Fortunately, there are many solutions to produce large image backgrounds and ways to place HTML over the images.

The easy way to stretch any background image in a browser viewport is to use a background image in CSS. Here is an example. First, how do you do stretch background images with CSS.  The most popular method comes directly from a Stu Nicholls version and CSS-Tricks, Perfect Full Page Background Image explains the technique very well. This page demonstrates how to stretch an image and place HTML on top in a container div, the tips at CSS-Tricks provides a demo and sample files that you can download.  Be sure to a use a background image with the same or more pixels than the sample file so the image will not get pixelated. Will the image distort? Yes, it will distort to some extent if the browser viewport is very wide or tall, so it works best with soft focus images that can tolerate extreme horizontal or vertical stretching.

Stretching images in the browser viewport is a useful technique, but using a SWF instead of an image can offer more variations in your presentation. For example,  August uses a stretchable SWF that fades in gradually. Here are a few tips on how to use a SWF file as a CSS background image. First, use this script from Flash Retrospective to scale an image proportionally. You can do whatever tweaks you want in the movie clip. After the SWF is complete, you will need to set the SWF to scale at 100% in the browser viewport.  Use the Script below to display the SWF at any size in the browser viewport with HTML content over the SWF. You can style the HTML content with CSS; put the content in a wrapper or whatever works with your design. Faster Internet speed and advanced monitor resolution allow us to push the limit and make web backgrounds that were previously impossible. Stretchable backgrounds are here to stay.

Copy to CSS:

* { margin: 0; padding: 0; }
body { margin: 0; padding: 0; background-color: #000; height: 100%; }
#flash-container { height: 100%; width: 100%; overflow: visible; }
#background { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
#flash-background { height: 100%; }
#content { position: absolute; color: red; font-size:16px; padding: 60pt; }

Copy to HTML:

<script type="text/javascript">
$(function() {
var so = new SWFObject("swf/bg.swf", "flash-background", "100%", "100%", "6");
so.addParam("movie", "swf/bg.swf");
so.addParam("quality", "high");
so.addParam("wmode", "transparent");
so.write("flash-container"); })
</script>
<div id="background">
<div><embed type="application/x-shockwave-flash" src="bg.swf" style="" name="flash-background" quality="high" movie="swf/bg.swf" wmode="transparent" height="100%" width="100%"></div>
</div>
<div id="content"> This is the content</div>

Author -

who has written 551 posts on [Re]Encoded.com.


Contact the author


10 Responses to “The Huge Trend – Full Screen Image Websites”

  1. rory Says:

    This is tutorial is perfect, Ive been asked to do a fullscreen site for a client. But Ive never done one before… Luckily you guys have come along and saved the project. Much appreciated.


  2. Rob James Says:

    we had to do a full screen image website for a clients homepage – http://www.inwaterflowers.co.uk/ – the client had a “vision” and we made it happen!


  3. Ted Thompson Says:

    Thanks for sharing, some great designs in there.


  4. vacationleaf » The Huge Trend – Full Screen Image Websites Says:

    [...] 5 Comments 25 April 2010 [...]


  5. SJL Website Design Says:

    Great post!! Thanks for sharing these awesome links too!!

    Thanks.


  6. Juul Jacobs Says:

    Help! I followed the code and it works perfect in safari, but in firefox the swf get’s weirdly al above in the window, can anybody help me with that problem?
    Thanks alot.


  7. Patrick Says:

    Thx!

    One question: The code that I copy to HTML, where do I paste that code? I’ve never used Flash before.

    Does that code get pasted right after the opening html tag, before any other html code? I ask because I usually place my js code after the closing html tag, at the end of the document.

    I really like this method but I’m confused as to how I implement it correctly. Thx again.


  8. james karalus Says:

    Great post I have been hunting around now for a few days and trying to discover how people are doing this most of the sites at FLA awards are all in flash is it possible with your resources files to make this happen


  9. wagster Says:

    Nice examples.

    Checkout swffit – http://swffit.millermedeiros.com/

    It will constrain the Flash div to any given minimum size – making it behave much like CSS. Easy and works a treat alongside SWFObject. Lovely.


  10. Screen image | Florica Says:

    [...] The Huge Trend – Full Screen Image Websites | [Re]Encoded.comWhile some large background sites depend on a fluid or elastic layout to stretch across the browser viewport, others use large images with a … [...]


Leave a Reply