View Full Code Snippet

<!DOCTYPE html>
<html>
	<head>
		<title>More Descriptions</title>
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="./styles/image2.css"/>
		<script type="text/javascript">
			// Helper function
			function GetURLParameterValue(sParam)
			{
				var sQueryString = window.location.search.substring(1);
				var sVariables = sQueryString.split('&');
				for (var i = 0; i < sVariables.length; i++)
				{
					var sCurrentParamName = sVariables[i].split('=');
					if (sCurrentParamName[0] == sParam)
					{
						return sCurrentParamName[1];
					}
				}
			}

			$(document).ready(function () {
				var imageName = "";
				var contentToAdd = "";
				imageName = GetURLParameterValue("img");
				if (imageName == "") {
					// You might change the alternate content
					contentToAdd = "<span>No image provided.</span>";
				} else {
					contentToAdd = "<img src='./images/" + imageName + "' />";
				}
				$("#content").append(contentToAdd);
			});
		</script>
	</head>
	<body>
		<div id="content"></div>
	</body>
</html>
---  image2.css ----
* reset browser default margins because different browser would have different margin settings*/
* {
    margin : 0; 
    padding : 0; 
}

/* apply uniform margins for select elements for uniformity*/
h1, h2, h3, h4, h5, p, ul, ol   
{
    margin : 0 20px; 
    padding : .5em 0; 
}
    
/* =html set background color and an image at the top with color transition, dark to background color  )*/
 body
{
	background : rgb(137, 137, 137);
} 
#content {
    background: blue url(../images/dpic.png);
	background-size: 320px 200px;
	margin:5em auto;
	width:320px;
	height:200px;
	border: 0px solid red;
}