Responsive Background Image with caption over the top issues

[suddenhit]

I'm running into a responsive background image issue.I'm using this css \[code\]#home-column{ max-width:960px;}#home-bg-image { padding-top: 52.08%; /* 500px/960px = 0.5208 */ background-image: url(/images/home-page/home-page-main-image.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ margin-top:-10px; }#home-feature{ background:url(/images/template/home-feature-bg.png) repeat; width:30%; }<div id="home-column"> <div id="home-bg-image"> <div id="home-feature"> <h1>Header</h1> <p>Content ...</p> </div> </div></div>\[/code\]I want to get #home-feature to float in the top right corner (ontop of the main background image in #home-bg-image), however when I add a float it moves the div underneath #home-bg-image Any suggestions?I got the code off http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios