How to make text relative to background using HTML/CSS?

[xire]

I have made it so that my background image scales to fit the size of the viewport. Now, I want the text to scale relative to the background image. Note: I am using the \[code\]<img>\[/code\] tag for the background image because this allows for scaling with smaller browser windows (i.e., mobile devices).CSS\[code\]img.bg{ min-height: 100%; min-width; 781; width: 100%; height: auto; top: 0; left: 0; position: absolute; z-index: 1;}@media screen and (max-width: 781){ img.bg { left: 50%; margin-left: -390.5; }}#container { position: relative; top: 0px; width: 781; height: 758; border: 1px solid black z-index: 2;}#left{ position: relative; left: 1.280409731113956%; top: 14.51187335092348%; padding-top: 10px; padding-left: 10px; padding-right: 10px; width: 50%; height: 50%; z-index: 2;} p{ font: 14px Georgia; color: #FFFFFF;}\[/code\]HTML\[code\]<img class="bg" src="http://stackoverflow.com/questions/11544811/background.jpg"><div id="container"><div id="left"> <p>Text</p></div></div>\[/code\]