I have a proyect in JSF, using Twitter Bootstrap for the design. This is my code on the main page:

```
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>MarketPlace</title>
        <link href="./resources/dist/css/bootstrap.css" rel="stylesheet" type="text/css"/>
        <link href="./resources/dist/css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
   <link href="./resources/dist/css/signin.css" rel="stylesheet" type="text/css"></link>
    </h:head>
    <h:body>
        <div class="container">
            <div class="jumbotron">
                    <div class="container">
                        <h1>Welcome to Hamazón!</h1>
                        <p>Register down below, or enter with your credentials.</p>
                    </div>
                </div>
            <h:form class="form-signin">
                Username:<h:inputText class="form-control" value="#{accountManager.username}"/>
                Password:<h:inputSecret class="form-control" value="#{accountManager.password}"/>
                <h:commandButton class="btn btn-lg btn-primary btn-block" value="Login" action="#{accountManager.login}"/>
                <h:commandButton class="btn btn-lg btn-primary btn-block" value="Register" action="#{accountManager.register}"/>
                <h:outputText rendered="#{accountManager.availableMessages}" value="#{accountManager.message}"/>

      </h:form>
    </div>
    </h:body>
</html>

```

I have an image that I want to put as the background, but it appears to be cut by the `div` or the other elements. [Here's a link to the actual problem](http://oi40.tinypic.com/23idyy9.jpg) 

My CSS stylesheet is the one used by Bootstrap and this piece of code that was recommended in [This post here.](http://css-tricks.com/perfect-full-page-background-image/) Here's the entire css stylesheet:

```
html { 
  background: url(marketbg.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  font-size: 16px;
  height: auto;
  padding: 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="text"] {
  margin-bottom: -1px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

```

Any help will be greatly appreciated and any other info regarding to solve this problem I'll be more than happy to provide.