Как добавить JumboTron эффект фонового изображения на Yii2 Advanced Шаблон

Question

Я пытаюсь для того чтобы достигнуть эффекта, как показано ниже, например, от Skelly пользователя в этом посте: https://stackoverflow.com/a/20920731/5328266

И это то, что я сделал сейчас:

AppAsset.php:

<?php 
/** 
* @link http://www.yiiframework.com/ 
* @copyright Copyright (c) 2008 Yii Software LLC 
* @license http://www.yiiframework.com/license/ 
*/ 

namespace frontend\assets; 

use yii\web\AssetBundle; 

/** 
* @author Qiang Xue <qiang.xue@gmail.com> 
* @since 2.0 
*/ 
class AppAsset extends AssetBundle 
{ 
    public $basePath = '@webroot'; 
    public $baseUrl = '@web'; 
    public $css = [ 
     'css/site.css', 
    ]; 
    public $js = [ 
     'javascript/jumboHeight.js' 
    ]; 
    public $depends = [ 
     'yii\web\YiiAsset', 
     'yii\bootstrap\BootstrapAsset', 
    ]; 
} 

и папка с содержащим файлом JavaScript, как это:

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

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

И это мой Index.php:

<div class="site-index"> 
    <div class="bg"></div> 
    <div class="jumbotron"> 
     <div class="container"> 
      <blockquote class="pull-left"> 
       <header class="pull-left text-primary">News</header> 
       <br> 
       <comment>Setting up Website</comment> 
      </blockquote> 
      <br> 

      <h1>Congratulations!</h1> 

      <p class="lead">You have successfully created your Yii-powered application.</p> 

      <p><a class="btn btn-lg btn-success" href="http://localhost/yii/frontend/web/index.php?r=projects%2Fcreate">Starting 
        a Project !</a></p> 
     </div> 
    </div> 

и CSS:

html, 
body { 
    height: 100%; 
} 

.wrap { 
    min-height: 100%; 
    height: auto; 
    margin: 0 auto -60px; 
    padding: 0 0 60px; 
} 

.wrap > .container { 
    padding: 70px 15px 20px; 
} 

.footer { 
    height: 60px; 
    background-color: #f5f5f5; 
    border-top: 1px solid #ddd; 
    padding-top: 20px; 
} 

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

.jumbotron .btn { 
    font-size: 21px; 
    padding: 14px 24px; 
} 

.not-set { 
    color: #c55; 
    font-style: italic; 
} 

/* add sorting icons to gridview sort links */ 
a.asc:after, a.desc:after { 
    position: relative; 
    top: 1px; 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 
    padding-left: 5px; 
} 

a.asc:after { 
    content: /*"\e113"*/ "\e151"; 
} 

a.desc:after { 
    content: /*"\e114"*/ "\e152"; 
} 

.sort-numerical a.asc:after { 
    content: "\e153"; 
} 

.sort-numerical a.desc:after { 
    content: "\e154"; 
} 

.sort-ordinal a.asc:after { 
    content: "\e155"; 
} 

.sort-ordinal a.desc:after { 
    content: "\e156"; 
} 

.grid-view th { 
    white-space: nowrap; 
} 

.hint-block { 
    display: block; 
    margin-top: 5px; 
    color: #999; 
} 

.error-summary { 
    color: #a94442; 
    background: #fdf7f7; 
    border-left: 3px solid #eed3d7; 
    padding: 10px 20px; 
    margin: 0 0 15px 0; 
} 

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

но есть проблема с отображением изображений на этом jombotron и вот как это выглядит :

Итак, в чем проблема?

Любое предложение, которое я буду оценивать.

Answer 1

Попробуйте следующий код:

.jumbotron { 
    background-color: transparent !important; 
    background-image: url("image.jpg") !important; 
}