How to set inline rails image_tag as background image?

Question

 =image_tag "#{user.image}", :class => "user-photo"

this code above set the image, but I want all images to be circular. If a user uploads a photo with the wrong dimensions, setting the border radius to 50% results in an oval photo, instead of a circular one.

I'm thinking if I can set the interpolated image inline as a background image, I can then make them all circular.

score 0 · Answer 1 · answered Jul 29 '15 at 22:16

0

.circular {
    width: 300px;
    height: 300px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(http://link-to-your/image.jpg) no-repeat;
}

http://bavotasan.com/2011/circular-images-with-css3/

answered Jul 29 '15 at 22:16

itzmurd4

663
10
25

I do not have access to the image links within css, as they are an uploaded user image and set in s3. – NewGuy504 Jul 29 '15 at 22:17
You don't need the link, just reference the `circular` class to your picture `
''s and it should do the trick. Disregard the `background:` in the css.
– itzmurd4 Jul 29 '15 at 22:22
Would that not distort the image, though? – NewGuy504 Jul 29 '15 at 22:28
yeah, I'm pretty sure that comes down to my root issue of it needing to be a background image. – NewGuy504 Jul 29 '15 at 22:35
use an instance variable of your saved user pic – itzmurd4 Jul 29 '15 at 22:38
can you give an example. I'm not sure what you mean. – NewGuy504 Jul 29 '15 at 22:50
Check out the first answer, 2nd link, section 2.3.1. Hope that helps - http://stackoverflow.com/questions/7653381/use-ruby-rails-variables-inside-sass-and-less – itzmurd4 Jul 30 '15 at 02:16

How to set inline rails image_tag as background image?

1 Answers1