背景图片无法正常显示

我在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或其他元素进行切割。 Here's a link to the actual problem

我的CSS样式表是一个由引导使用，这段代码在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; 
}

任何帮助，将不胜感激和任何其他信息就解决这个问题我会很乐意提供。

来源

2013-10-16 Jean Carlos Suárez Marranzini

你可能想尝试指定背景为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-16 16:13:01 awaigand

谢谢，工作得很好！ –

嗨你在html中的背景似乎工作正常，但也许原因是有些元素也有背景属性。尝试把这个在CSS文件中：

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

来源

2013-10-16 16:07:18 DaniP

感谢您的建议！ –

背景图片无法正常显示

回答

相关问题