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:
/*----- 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:
<!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>
