CSS后台URL不显示在Bootstrap容器中

时间:2014-08-25 23:05:11

标签: css twitter-bootstrap ruby-on-rails-4.1

我有一个来自Twitter Bootstrap的.container,我正在设置一行以获得图像的背景url(),我希望它跨越整个视口宽度。 但是,目前,图片根本没有显示,即使我知道我拥有资产的准确路径,就像我查看View Source并在新标签页中打开src网址一样,它显示了图片。

这是我的haml文件:

.container
  .row
    .my_div
      This is the div that does't display the bckgd url
  %p
  %p
  %br/
  .row
    .col-md-4
      .quote
        I will never forget the time I spent here.
        .signature Jeremy, Switzerland
    .col-md-4
      .quote
        Since I entered FLS, I have never regretted my decision because the classes offered by FLS are all fantastic.
        .signature Chia-Yuan, Taiwan
    .col-md-4
      .quote
        The quality of teachers is good.
        .signature Masaru, Japan

%br
%br
#instafeed
.container
  %br/
  .row
    .col-md-4
    %div{class: "col-md-4\""}
      %video{controls: "", height: "240", width: "320"}
        %source{src: "movie.mp4", type: "video/mp4"}
          %source{src: "movie.ogg", type: "video/ogg"}
           Your browser does not support the video tag.
    .col-md-4
      .quote
        Boston is [a] really attractive city for me.
        .signature Takashi, Japan
  / row
  %br/
  .row
    .col-md-4
   .col-md-4
      .quote
        I have had many good experiences at FLS.
        .signature Fukiko, Japan
    .col-md-4
      .quote
        The teachers are qualified and friendly.
        .signature Tatyana, Russia
        / style
      / quote
    / column
  / row
  %br/
/ container

这是CSS

html .my_div{
  background: url(image_path("photo_With_valid_path.jpg"));
  background-origin:initial;
  background-repeat-x:initial;
  background-repeat-y:initial;
  background-clip:initial;
  background-position:center;
  background-attachment:fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover!important;
  width: 100%;
  height: 100%; 
}

即使在编辑了我不理解的所有CSS并删除了Rails框架之后,似乎以下不是显示背景图像的有效方式:

http://jsfiddle.net/Lc0dptgs/

所以我在这里显然缺少一些基本组件。

我附上了在Chrome中呈现的内容的屏幕截图,以及与div关联的CSS以及显示的内容:这是一个0px高度的div,因此没有bckgd照片。

enter image description here

1 个答案:

答案 0 :(得分:2)

你的背景css最后有两个括号。

background: url(image_path("photo_With_valid_path.jpg"));

删除一个,事情应该有效。

background: url(image_path("photo_With_valid_path.jpg") !important;

示例: jsFiddle Updated