image overlay in RoR

Question

I want to overlay one image on top of another in RoR.

Doing so in plain html is easy (from https://stackoverflow.com/a/1997397/1760830):

<div style="position: relative; left: 0; top: 0;">
  <img src="a.jpg" style="position: relative; top: 0; left: 0;"/>
  <img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>
</div>

This code works for me when I put it in a separate file.html. Then in Rails I do:

<div style="position: relative; left: 0; top: 0">
  <%= image_tag "a.jpg", :style => "position:relative; top:0; left:0;" %>
  <%= image_tag "b.jpg", :style => "position:absolute; top:30; left:70; 
                                    border:thick solid blue;" %>
</div>

but the second image is displayed next to the first one, without any offset. The second image border is added to the code to check that the style is actually passed on.

Any ideas why the Rails version doesn't work?

ruby 1.9.3, rails 3.2

can u please use html class instead of `:style` as inline styling is not a good option...use like <%= image_tag("a.jpg", :class => "first_image" %>` and in css `.first_image {position:relative; top:0; left:0;}` — Rajarshi Das, Sep 09 '13 at 05:30
if the first code works, i don't see any reason why the second code wont work. make sure that the first code works first. one more thing you can test is to put them in the same view and then compare the generated html. — jvnill, Sep 09 '13 at 06:17

mickro · Accepted Answer · 2013-09-09T05:50:31.187

because code you copied puts second image next to the first.

try that:

 <div style="position: relative; left: 0; top: 0;">
  <img src="a.jpg" style="position: relative; top: 0px; left: 0px;"/>
  <img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>
 </div>

sample there: http://fiddle.jshell.net/hmfzN/1/

add px and that rocks.

means in rails / ERB:

<div style="position: relative; left: 0; top: 0">
  <%= image_tag "a.jpg", :style => "position:relative; top:0px; left:0px;" %>
  <%= image_tag "b.jpg", :style => "position:absolute; top:30px; left:70px; border:thick solid blue;" %>
</div>

image overlay in RoR

1 Answers1