Text box and button on a image in MVC using responsive web design

Problem

I have to create an MVC web for my company and I'm using a responsive web design framework (Zurb Foundation). It works amazing. But my problem is I have an image in one of the divs and I need to add a textbox and a button into the image (basically it's a login). I wanted a kind of control, with the background image and then the html textbox/button, but not sure if this is possible in MVC.

I tried with css (position:absolute) but when I re-size the page to let the html adapts to the different browser sizes, it doesn't work.

How can I solve this problem?

Thanks.

Problem courtesy of: Scheveningen

Solution

Aaaah, I got it now.

You need to understand position for this.

Some information

An absolute positioned element in a relative positioned element...

jsfiddle

Just play some with the margin, breaks etc...

Solution courtesy of: Ron van der Heijden

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.