Below is the code snippet I am working on:
<div id="intro_section_upper" >
<%= image_tag("video_background.jpg", :id=>"video_bg") %>
<div id="video_table_main" >
<table class="video_table">
<% count = 0 %>
<tr>
<% @f_videos.each do |f_video| %>
<td><div class= "video_cell">
<%= f_video.name %> </br>
<%= image_tag(f_video.thumbnail_url, :class => "video_thumb") %>
</td></div>
<% count +=1 %>
<% if count % 4 == 0 %>
</tr>
<% end %>
<% end %>
</table>
</div>
I have also created the following CSS rules:
#intro_section_upper
{
position: relative;
width: 1024px;
min-width: 1000px;
min-height: 600px;
margin: 150px auto;
color: #333399;
border-style:solid;
border-width:1px;
border-color:#3366CC;
border-radius: 15px;
background-color:#3366CC;
font-family: 'Arial';
font-size:16px;
}
/* Float fix */
#video_table_main {
height:600px; overflow:auto;
}
img#video_bg
{
width:100%;
height:100%;
}
/* Individual Video Data Cell Formatting */
.video_cell
{
color: #C0C0C0; font-weight:bold; font-size:1em;
}
.video_thumb
{
vertical-align:text-top;
width: 180px;
height : 180px;
}
I would like the thumbnail table to be positioned above the background image instead of below it. Additionally, I am looking for a way to round the border of the image to match the rounded corners of the container. Any suggestions on how to achieve this?