Hello:

I would like to have my home page display an image full screen. In addition, I would like to have the image fade in from one image to another.

I have an image with the size 3805x2520. This image was exported from Lightroom 3.

Currently, the image is not being shown entirely on the page. I have not yet attempted the slideshow portion.

I could use some help in figuring out how to automatically resize images to full screen.

You can view the page here http://www.fullfocuscp.com.

Below, I have included the CSS and HTML for that page.

Thank you in advance for your help.

CSS:
Code:
/*-----	Simple reset  ----*/

*{
	margin:0;
	padding:0;
}

/*------ General ------*/

html{
	background:url(images/back-of-church.jpg) no-repeat center center;  /* This image will be displayed fullscreen */
	min-height:100%;  /* Ensure the html element always takes up the full height of the browser window */
	background-size:cover;  /* The Magic */
}

body{
	min-height:100%;  /* Workaround for some mobile browsers */
	font:14px/1.3 'Segoe UI',Arial, sans-serif;
}

/*------ Header  -------*/

#bar {
	background-color: #111111;
	top: 0;
	box-shadow: 0 -1px 2px rgba(0,0,0,0.4);
	height: 45px;
	left: 0;
	position: fixed;
	width: 100%;
	z-index: 100000;
	opacity:.20;
	filter: alpha(opacity=20); 
	-moz-opacity: 0.20;

img {
	border:3px;
}

.toptext {
	color: #9C6300;
	font-size: 14px;
	font-family: arial;
	font-weight: bold;
	left: 55%;
	margin-top: 10px;
    margin-left: 110px;
	position: absolute;
	text-decoration: none;
	top: 0;
	vertical-align: middle;
}

.toplinks {
	color: #9C6300;
	font-size: 14px;
	font-family: arial;
	font-weight: bold;
	left: 55%;
	margin-top: 10px;
    margin-left: 110px;
	position: absolute;
	text-decoration: none;
	top: 0;
	vertical-align: middle;
}
HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="keywords" content="atlanta headshot photography,
                               atlanta headshot photographer,
							   atlanta advertising photography,
							   atlanta advertising photographer,
							   atlanta product photography,
							   atlanta product photographer/>
<meta name="description" content="Atlanta headshot photography, atlanta advertising photography, atlanta product photography serving the metro Atlanta area." />
<META HTTP-EQUIV="distribution" CONTENT="Global">
<meta http-equiv="resource-type" content="document">
<META name="robots" content="index,follow">
<META name="robots" content="ALL">
<META name="REVISIT-AFTER" content="7 days">
<meta name="SKYPE_TOOLBAR" content ="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/> 
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
       
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    
<body>

	
	<img src="images/logo.png">
	<span class="toptext">678 - 591 - 8121</class>
	<span class="toplinks">HOME | PORTFOLIO | PRICING | ABOUT | CONTACT</span>	
			
    <div id="bar">		
	</div>	
	
</body>
</html>