Trouble Styling Divs On Top Of An Image (css)

I have a rails app that i've been working on, and one of the functionality aspects I do with it is that I ask the user to import an image (i'm using the paperclip gem to do that).

Solution 1:

The two, img and cafe_info is position: relative.

You need to use position: fixed, or position: absolute (depending on what style you would like) to have the cafe_info div on top.

Read more here: look under position absolute

Good luck!

Note:

You could also do something like this:

if you made your css compatible with erb

#cafe_show.scss.erb      
.image_holding_div {
  position: relative;
  background-image: url(<%= @cafe.image.url(:medium) %>);
}  

And then you don't need the image_tag.

Solution 2:

You can try absolute position rather than be using relative and defining the top & left as well. A sample CSS could be like this:

.cafe_info { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}