根据宽度渲染动态生成的背景

Question

所以我有一个背景图像属性（作为引用项目中图像的字符串），属于徽章 table。

我正在根据当前路径渲染每个背景图像。但是我想以两个不同的最大宽度渲染不同的图像。

例如，

.badge-headline-background{style: "background-image:url(../assets/header-graphics/#{@badge.background})"}

以全宽呈现背景，而

.badge-headline-background{style: "background-image:url(../assets/small-header-graphics/#{@badge.background})"}

一旦最大宽度达到 700 像素左右，应使用较小的图像。

调整背景位置和背景大小不是一种选择。它必须是两个单独的图像。

感谢任何意见。谢谢！

Answer 1

.class {background-image: url(whatever-1.jpg);}    
@media (max-width:700px) { .class {background-image: url(whatever-2.jpg;)} }

Answer 2

这应该有效，使用动态值

.badge-headline-background

:css
  .badge-headline-background { 
    background-image: url("../assets/header-graphics/#{@badge.background}");
  }
  @media (max-width: 700px) {
    .badge-headline-background { 
      background-image: url("../assets/small-header-graphics/#{@badge.background}");
    }
  }

根据宽度渲染动态生成的背景

Rendering a dynamically generated background based on width

html

css

ruby-on-rails

sass

haml