我有一个来自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框架之后,似乎以下不是显示背景图像的有效方式:
所以我在这里显然缺少一些基本组件。
我附上了在Chrome中呈现的内容的屏幕截图,以及与div关联的CSS以及显示的内容:这是一个0px高度的div,因此没有bckgd照片。
答案 0 :(得分:2)
你的背景css最后有两个括号。
background: url(image_path("photo_With_valid_path.jpg"));
删除一个,事情应该有效。
background: url(image_path("photo_With_valid_path.jpg") !important;
示例: jsFiddle Updated