0

我有一个 JSF 项目，使用 Twitter Bootstrap 进行设计。这是我在主页上的代码：

<?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>

我有一张我想作为背景的图像，但它似乎被div或其他元素剪切。这是实际问题的链接

我的 CSS 样式表是 Bootstrap 使用的样式表，以及这篇文章中推荐的这段代码。这是整个 CSS 样式表：

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;
}

任何帮助将不胜感激，有关解决此问题的任何其他信息我将非常乐意提供。

4

2 回答 2

1

嗨，您在 html 中的背景似乎工作正常，但可能是因为某些元素也具有背景属性。尝试将其放在 css 文件中：

body, .container {
background
background:none !important;
}
于 2013-10-16T16:07:18.300 回答
1

您可能想尝试将背景分配给 body 而不是 html。前段时间帮我解决了一个类似的问题。

body { 
  background: url(marketbg.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
于 2013-10-16T16:13:01.827 回答