Question

我在JSF中有一个proyect，使用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或其他元素切割。 Here's a link to the actual problem

我的CSS样式表是Bootstrap使用的样式表和This post here.中推荐的这段代码。这是整个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;
}

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

Answer 1

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

body, .container {
background
background:none !important;
}

Answer 2

您可能想尝试将背景分配给正文而不是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;
}

背景图像无法正常显示

2 个答案: