fullscreen background image creates conflict with footer position

Question

So I am trying to do 2 things that work well on their own, but I'm having trouble integrating them together. First off, here's a link to the site: http://ericbrockmanwebsites.com/dev4

Create a fullscreen background image using

html {
  min-height:100%;
  background-size: cover;
  background-image: url(images/bg.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
}

create a footer that stays at the bottom of the page, even when there's no content, which normally would require something like this:

html {
  height:100%;
}

body {
  height:100%;
}

.container {
  min-height:100%;
}

#footer {
  clear:both;
  position:relative;
}

The problem is that in order for the footer to stay at the bottom the height of the html / body needs to be defined at 100%, but unless I define them using the min-height value, the background image just covers the screen as it loads. Meaning that if / when there's a need to scroll down, the background image only goes down to where the bottom of the screen was on load.

I've played around with this for a few hours, but can't seem to find a resolve. Am I missing something obvious?

Answer 1

Firstly, height and min-height aren't mutually exclusive. There's no reason you can't use both. As for the background scrolling when the page is longer than the available space, have you tried background-attachment: fixed?