How to have a non-fixed fullscreen background imag

Question

I am aware that several techniques exist to have a fullscreen background image, either with CSS3 or with absolute positioning and 100% height/width.

However, all these techniques result in fixed background images, meaning that if you have some content bigger than the screen that needs a scrollbar, the background image will stay fixed when scrolling.

Is it possible to have the background image stetch to the width/height of the page, instead of the screen?

Answer 1

Suppose you want a variable image-size header in your website (which occupies the complete height)

Inside your header add an ID or class with whatever naming you want.

I will take it as (id="test")

Now, go to the linked JS file and paste this..

var x = screen.availHeight + "px";
console.log(x)

document.getElementById("test").style.height = x;

Answer 2

I'd point you to the backstretch jQuery plugin to add this functionnality to your page. The linked page shows how the content stays fixed and scales according to the width/height of the browser.

edit

I'm not really sure how i would implement such a solution; i think you may have to use javascript since you can't find out the size of your content before it's loaded. Here's how i would try it:

• calculate the content size after load
• set the stretching of the background image to the content size
• bind some function that repeats this to any browser size change

I'm not really sure how it would feel performance-wise, but one may drawback to this technique is that unless you set size limits to your content, you may have to use a very large image to cover all cases.

Answer 3

I had the same problem as I'm building a fullsceen slideshow: fixed position makes images stay in place while sliding containing element instead of letting them sliding with this element...

I tried a lot of workaround using those techniques:

• CSS-Only Technique #1: works fine with position set to relative, but doesn't center the image verticaly.

• Awesome, Easy, Progressive CSS3 Way : I tried all possibilities in vain before to realise that not filling the position value worked (really awesome)!

  html { 
      background: url(images/bg.jpg) no-repeat center center; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  

Answer 4

The problem with such an approach is that you can never guess how big your content is going to get; 1,000 pixels? 10,000 pixels? imagine stretching an image that big, if you decide to use a huge image it will slow down your page loads or if you decide to go with a reasonably sized image it will distort very badly if it goes outside its boundaries.

Take this for example and increase the content count accordingly and see how the background image distorts: http://jsfiddle.net/andresilich/75Sfp/