使用Bootstrap doen的Jumbotron的背景图像为我工作

时间:2015-01-29 17:28:31

标签: html css twitter-bootstrap background-image

我一直在尝试向jumbotron添加背景图像,但图像没有出现。

我完全从这个链接中获取了代码:http://www.bootply.com/103783

我复制粘贴HTML,CSS和java我只改变了图像路径。

我已尝试过许多其他代码用于图像作为jumbotron的背景。没有工作我的意思是没有图像出现。图像出现一次使用我提到的代码,但它不在jumbotron后面,它出现在它旁边或只是在页面的某个地方。感谢您的帮助:(

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


    <div class="bg"></div>
    <div class="jumbotron">
        <h1>Bootstrap Jumbotron</h1>
        <p class="lead">+ Parallax Effect using jQuery</p>
    </div>



</head>


    </body>
    </html>

CSS:

.bg {
    background: url('2.jpg') no-repeat center center;
    position: fixed;
    width: 100%;
    height: 350px; /*same height as jumbotron */
    top:0;
    left:0;
    z-index: -1;
}

.jumbotron {
    height: 350px;
    color: white;
    text-shadow: #444 0 1px 1px;
    background:transparent;
}

JS:

var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
    var scrolled = $(window).scrollTop();
    $('.bg').css('height', (jumboHeight-scrolled) + 'px');
}

$(window).scroll(function(e){
    parallax();
});

1 个答案:

答案 0 :(得分:0)

假设您的css中的图片路径正确,问题是您的标记位于<head>标记内。此标记中的任何内容都不会呈现为页面。

您的标记结构应为:

<html>
  <head>
    <!----- head stuff ----->
  </head>
  <body>
    <!--- for semantic reasons you could wrap your jumbotron in a <header></header> tag --->
    <div class="bg"></div>
    <div class="jumbotron">
      <h1>Bootstrap Jumbotron</h1>
      <p class="lead">+ Parallax Effect using jQuery</p>
    </div>
  </body>
</html>