Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 4 days ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 1 week ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

jQuery scalable fullscreen background image

AshleyAshley

I remember when fullscreen flash sites we’re all the rage in the mid 90’s with flamboyant splash pages enticing you in. A large number of these sites had an eye catching image that would full your browser regardless of the window size. Here’s how to set an image as the background for a webpage and make it proportionally scale depending on what size your browser window is.

The Code

Firstly we need to add an image to the page and give the image tag the id ‘background-image’ it’s recommended to add the image right after the opening ‘body’ tag.

The JavaScript to calculate the client browser window and photo dimensions is relatively simple. the first block of code does some initial calculations to determine the image ratio, browser width etc.

Then using jQuery to manipulate the image CSS rules we can stretch the image to fit the browser but keep the image in proportion.



$(document).ready(function() {


 var bgImage = $('#background-image');		
 
    function resizeImg() {
      var imgwidth = bgImage.width(),
		   imgheight = bgImage.height(),
		   winwidth = $(window).width(),
		   winheight = $(window).height(),
		   widthratio = winwidth / imgwidth,
		   heightratio = winheight / imgheight,
		   widthdiff = heightratio * imgwidth,
		   heightdiff = widthratio * imgheight;
 
      if(heightdiff>winheight) {
        bgImage.css({
          width: winwidth+'px',
          height: heightdiff+'px'
        });
      } else {
        bgImage.css({
          width: widthdiff+'px',
          height: winheight+'px'
        });		
      }
	 
	 $("#background-image").show();
	  
    } 
    resizeImg();
    $(window).resize(function() {
      resizeImg();
    }); 

});

A sprinkle of CSS

In order for the image to sit behind our page content we need to position it absolute with a lower z-index than the rest of our page content. You’ll also see that by default the image is set to display none, this is for users who dont have JavaScript enabled so they wont see the image at all.



#background-image{
	position:absolute;
	top:0;
	left:0;
	z-index:-10;
	overflow: hidden;
    width: 100%;
	display:none;
	}

download

Conclusion

This technique could be used in a number of ways, one that springs to mind would be a dynamic gallery where you click the thumbnails and it fills the screen with the image.

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 19
  • Amit
    Posted on

    Amit Amit

    Reply Author

    not workef in opera 12


  • Amit
    Posted on

    Amit Amit

    Reply Author

    Not working in opera


  • Karl
    Posted on

    Karl Karl

    Reply Author

    Hi, thx for this nice peace of work.
    How can i define a minimum width. for example at win width of 800px the resizing stops and it starts horizontal scrolling?
    Thanks
    Karl


  • max
    Posted on

    max max

    Reply Author

    getting scrollbars when resizing, removed all display divs so it was just the bg only but still getting scroll bars.


  • mimi
    Posted on

    mimi mimi

    Reply Author

    thanks for this tid bit of code love the full BG effect!


  • hello
    Posted on

    hello hello

    Reply Author

    After refreshing the page 2-3 times then the image looks proportional in opera browser. Could it be possible to fix that problem?


  • Kevin
    Posted on

    Kevin Kevin

    Reply Author

    Great tutorial. Helped me out a lot.


  • pandayai
    Posted on

    pandayai pandayai

    Reply Author

    Nice Tutorials ,i try us.


  • Drasta
    Posted on

    Drasta Drasta

    Reply Author

    looked for about 2 hours before finding this. Super clear and very straightforward with your crisp coding. Thanks! Great tutorial. Would be curious how to do this with a rotating slideshow…


  • Shalaco
    Posted on

    Shalaco Shalaco

    Reply Author

    Looks like Paul just schooled you on your own tutorial. Nice and nicely done.


  • Paul Mason
    Posted on

    Paul Mason Paul Mason

    Reply Author

    Nice Tutorial!

    I’ve written a similar tutorial on how to achieve the same effect without using any JavaScript.

    Check it out:
    http://paulmason.name/blog/item/full-screen-background-image-pure-css-code


  • Hector
    Posted on

    Hector Hector

    Reply Author

    Does not seem to work well in Chrome, there is a fat square at the bottom, containing the links, in FF, looks fine, but not sure what was the actual look intended for, the bottom content.


  • Leo
    Posted on

    Leo Leo

    Reply Author

    also where do I plugin this code? I’m kinda new to this kind of stuff.

    I know the CSS goes into the style sheet but where does the javascript and jQuary go?

    Thanks for the help


  • Leo
    Posted on

    Leo Leo

    Reply Author

    What is in the download? I can’t get it to open. It says it’s invaild or corrupt


  • Senthil Kumar
    Posted on

    Senthil Kumar Senthil Kumar

    Reply Author

    Yeah man! Something is terribly going wrong in opera! :(


  • adrienj
    Posted on

    adrienj adrienj

    Reply Author

    Interesting, but scrollbars appear when I resize the window.
    On Mac, with Safari 5.0.2 and Firefox 3.6.11.
    Bottom scrollbar is always visible with Opera 10.60 on Mac.


  • ReTox
    Posted on

    ReTox ReTox

    Reply Author

    Doesn’t work in Opera


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      Hey, ReTox,

      Thanks for the heads up i’m on the case to sort that out now :)

      Ashley


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      Hey ReTox,

      I’ve just had a look in Opera and it’s working fine for me, what version of Opera are you running? Mac or PC?

      Thanks

      Ashley