Rails - Inline CSS

Question

So I'm making a user profile page for my app. However I want the user's avatar to have an inset white box-shadow. Therefore using <img /> isn't an option since it doesn't support inset shadows (or at least not in Chrome). So instead I'm using a <div> with some inline css to set the image. Here's kinda what I want but of course it wont work.

<div id="avatar" style="background: <%= @person.avatar %>"></div>

Can anyone point me in the right direction for doing this?

M. Cypher · Accepted Answer · 2011-08-03 23:01:44Z

3

Is avatar the actual URL of the image? In that case:

<div id="avatar" style="background-image: url('<%= current_person.avatar %>')"></div>

Make sure that the width and height match the image dimensions in the CSS.

answered Aug 3, 2011 at 23:01

M. Cypher

7,0762 gold badges38 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jordan Adams Over a year ago

Ah yeah, I was just missing the = in <%= ... %> Thanks :)

maček · Accepted Answer · 2011-08-03 23:05:02Z

0

This should work pretty well

<div id="avatar" style="background:url(<%= current_person.avatar %>) no-repeat;" width="<%= User.AVATAR_WIDTH %>" height="<%= User.AVATAR_HEIGHT %>"></div>

User.AVATAR_WIDTH and User.AVATAR_HEIGHT should be defined in your app/models/user.rb as something like:

class User
  AVATAR_WIDTH = 250
  AVATAR_HEIGHT = 250
end

answered Aug 3, 2011 at 23:05

maček

78k37 gold badges172 silver badges200 bronze badges

Collectives™ on Stack Overflow

Rails - Inline CSS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related