基于rails4.0环境

为了美化界面,添加背景图片,于是又傻逼了一回~~

一开始在xxx.html.erb中添加:(注:图片的路径为:app/asssets/images/background.jpg)

<style>
……
html {
background-color: #447d9a;
background-image: url(background.jpg) ;
background-repeat: repeat-x;
background-position: 100% 50%;
background-size: cover;
background-attachment: fixed;
}
……
</style>

然后报错:

No route matches [GET] "/background.jpg"

在页面加入测试语句:

<img src="background.jpg">

发现图片能够显示。。。

然后搜索了很多网页,都说会不会是图片路径错误。

于是,把可能的路径都添加了这张图,依然不行~~

苦逼了好久~~

然后尝试用 asset-url,还是不行

然后,去看文档:http://edgeguides.rubyonrails.org/asset_pipeline.html,得到启发

在layout/application.html.erb中添加下面代码:

 <%= image_tag "background.jpg" %>

然后背景图片路径配置还是照那样写,如下

background-image: url(background.jpg) ;

结果,图片能够显示了。。。

ruby -- 进阶学习(十四)设置background-image(解决无法获取图片路径问题)的更多相关文章

  1. ruby -- 进阶学习(四)paperclip上传中文命名图片

         Paperclip -- 上传中文命名图片 使用Paperclip和ImageMagick插件来处理图片的时候,上传非中文命名的图片时,只要把配置写好就没问题 if you need to ...

  2. Java进阶(三十四)Integer与int的种种比较你知道多少?

    Java进阶(三十四)Integer与int的种种比较你知道多少? 前言 如果面试官问Integer与int的区别:估计大多数人只会说到两点:Ingeter是int的包装类,注意是一个类:int的初值 ...

  3. Python爬虫学习:四、headers和data的获取

    之前在学习爬虫时,偶尔会遇到一些问题是有些网站需要登录后才能爬取内容,有的网站会识别是否是由浏览器发出的请求. 一.headers的获取 就以博客园的首页为例:http://www.cnblogs.c ...

  4. 大白话5分钟带你走进人工智能-第十四节过拟合解决手段L1和L2正则

                                                                               第十四节过拟合解决手段L1和L2正则 第十三节中, ...

  5. 强化学习(十四) Actor-Critic

    在强化学习(十三) 策略梯度(Policy Gradient)中,我们讲到了基于策略(Policy Based)的强化学习方法的基本思路,并讨论了蒙特卡罗策略梯度reinforce算法.但是由于该算法 ...

  6. Scala学习十四——模式匹配和样例类

    一.本章要点 match表达式是更好的switch,不会有意外调入下一个分支 如果没有模式能够匹配,会抛出MatchError,可以用case _模式避免 模式可以包含一个随意定义的条件,称做守卫 你 ...

  7. 前端基础进阶(十四):es6常用基础合集

    在实际开发中,ES6已经非常普及了.掌握ES6的知识变成了一种必须.尽管我们在使用时仍然需要经过babel编译. ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大.值得高兴的是,如果你熟悉 ...

  8. ruby -- 进阶学习(十)自定义路由中:new, :collection和:member的区别

    学习链接:http://rubyer.me/blog/583/ RESTful风格的路由动词默认有7个(分别为:index, show, create, new, edit, update, dest ...

  9. ruby -- 进阶学习(十二)fragment cache

    基于rails4.0环境 Rails 页面缓存的方法很多,最近弱弱地尝试了fragment cache,用法还算简单~@_@|| 首先,查看config/environment/production. ...

随机推荐

  1. CreateJSのeasel.js(一)

    CreateJS是基于HTML5开发的一套模块化的库和工具. 基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. CreateJS为CreateJS库,可以说是一款为HTML5游戏 ...

  2. 虚拟机评估——如何确定一个CPU核上部署的虚拟机数量?

    最近研究虚拟化技术,不可避免遇到一个问题:如何评估物理主机上虚拟主机的容量?下面这篇文章的思路有一定的启发性,转发一下. 如何确定一个CPU核上部署的虚拟机数量? 摘要:本文说明一个CPU核上部署虚拟 ...

  3. easy UI获取数据,打开毕弹窗

    <div id="modalwindow" class="easyui-window" data-options="modal:true,clo ...

  4. InteliJ IDEA15 安装jrebel破解文件

    使用InteliJ IDEA这个工具感觉比eclipse好用,例如它在没有源码的情况下自动反编译源码等,但是在使用的时,有个很不爽的地方就是不能实时编译,导致java代码更改了一点代码就需要重启项目, ...

  5. [C#] AY.WPF-图形编程-高中生为起点-研究报告1

    =========================www.ayjs.net独家拥有,未经许可,不许转载,违者追究法律责任 简单的引入:点的平移与转换 System.Window.Point类的 Off ...

  6. Android判断当前线程是否是主线程的方法

    开发过程中有时候会在Thread类中执行某些操作,有些操作会由于Android版本的不同,尤其是低版本而Crash,因此必要的时候会查看某些容易引起crash的操作是否是在主线程,这里举三种方法: 方 ...

  7. LCLFramework框架之Repository模式

    Respository模式在示例中的实际目的小结一下 Repository模式是架构模式,在设计架构时,才有参考价值: Repository模式主要是封装数据查询和存储逻辑: Repository模式 ...

  8. CSS3学习笔记--transform基于原始数据(旋转木马实例)

    参考链接:好吧,CSS3 3D transform变换,不过如此! transform-style:preserve-3d属性要在图片所在的容器(父元素)中定义,perspective定义在父子元素上 ...

  9. java后台进程和线程优先级

    1. 后台线程:处于后台运行,任务是为其他线程提供服务.也称为“守护线程”或“精灵线程”.JVM的垃圾回收就是典型的后台线程. 特点:若所有的前台线程都死亡,后台线程自动死亡. 设置后台线程:Thre ...

  10. C#记录对象的变化

    经常,我们会遇到一个场景,在保存对象到数据库之前,对比内存对象和数据库值的差异. 下面我写了一种实现,为保存定义一个事件,然后自动找出对象之间的差异,请注意,并没有通过反射的方式去获取每个属性及其值. ...