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

I have made it so that my background image scales to fit the size of the browser window. Now, I want the text to scale relative to the background image. Note: I am using the <img> tag for the background image in this way, because this allows for scaling with smaller browser windows (i.e., mobile devices).

    <html>
    <head>

	<title>Title</title>	

	<style>

	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;
	}

	</style>
HTML
    </head>

    <body>

	<img class="bg" src="background.jpg">

	<div id="container">
	<div id="left">
		<p>
		Text
		</p>
	</div>
	</div>

    </body>
