使用Parallax效果添加背景图像

时间:2015-10-08 07:06:27

标签: javascript html css parallax

我正在将视差效果添加到我的“联系页面”的背景中。不幸的是,我的Css样式表没有响应放置的背景图像,所以我决定测试背景颜色,确定我的背景是不同的颜色,但如何用图像替换该颜色?

<!--html-->
 <div class="container" id="contact"><!--container-fluid 2 begins-->
  <div class=" address column2">
   <h1><span class="glyphicon glyphicon-home"></span> Address:</h1>
    <p> 292250 Ace Center Dr. 1022</p>
    <p> Houston, Texas 77518 </p>
 </div>
  <div class="email column2">
   <h2><span class="glyphicon glyphicon-envelope"></span> Email:</h2>
    <p>broo@gmail.com</p>
 </div>
 <div class="phonenumber column2">
   <h2><span class="glyphicon glyphicon-phone-alt"></span> Phone Number:  </h2>
    <p>1(832)555-9209</p>
  </div>
  <div class="social column2">
   <h2><span class="glyphicon glyphicon-user"></span> Social Connection</h2> 
     <p><a class="btn btn-default" href="https://www.facebook.com/brooks.7739"                      role="button">Facebook &raquo;</a>
   <a class="btn btn-default" href="https://www.linkedin.com/pub/brooks-  mmis/5b/97/7a4" role="button">LinkedIn &raquo;</a></p>
 </div> 
  </div><!--container-fluid"2 ends-->


<!--CSS-->
 #contact{
background-image: url("img/contact.jpg");
background-size: cover;
background-attachment: fixed;
background-color: #dddddd;
color: white;
padding:100px;
padding-top: 35px;
height: 600px;
z-index: 1;
}

<!--JS-->
<script type="text/javascript">
    var $root = $('html, body');
      $('.navbar-nav a').click(function() {
          var href = $.attr(this, 'href');
          $root.animate({
            scrollTop: $(href).offset().top
          }, 500, function () {
            window.location.hash = href;
          });
          return false;
      });
  </script>

0 个答案:

没有答案