For example, there is a layout in which in order to work beautifully and cross- сss background-image: url("...") most of the pictures are set via the properties of the сss background-image: url("...") , specified cover , position . All content on the page is dynamic. For example, the output of news, or there are many pages that have the same style, but there must be different pictures depending on the page content (the rest of the style is the same).

This is done because simply inserting <img src=""> and setting the desired properties to it so that the picture occupies the entire surface of the block and does not deform without crutches is very problematic.

How to dynamically replace url pictures in css ?

Crutch - do javascript on the client - do not offer, because it means to pull one huge picture, then on the client to understand that this is not what you need and pull another big picture by inserting the amendment directly into html . The option to insert a picture via the style tag directly in html is also not very beautiful - although more interesting than javascript, there is one thing for this option - its name is IE8, which does not understand what is written there, just without knowing background-size: cover and others, he can even take a picture from the original style. As a result, you might have something like this: <div style="background-image: url("../img/exsample.png") ">....</div> . What, you see, is not very nice for html .

How to do it using php or ruby , or share how you do it in your framework?

  • It is not necessary to do the background, you can work with the img tag. Here is an example jsfiddle.net/atlanta/vdkzxj9o - user33274
  • one
    Describe the normal task and I will find you a solution. What you want is not entirely clear and may have a better solution than you imagine. - Steve

1 answer 1

Create multiple classes with different backgrounds.

 .background-1 { url: ... } .background-2 { url: ... } .background-3 { url: ... }

Then describe create a helper that will return the desired class depending on your conditions, for example:

 class MyCobtroller < ApplicationController attr_reader :background_class helper_method :background_class def action @background_class = 'background-1' ... end end

Further in html we use a method.

  <div class="<%= background_class %>"></div>
  • I have 5000 pictures in the news, a non-rolling version with Begrands - Yevgeny Bondarenko