#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    8
    Rep Power
    0

    Full Screen Background


    Hello:

    I would like to have a full screen background for my home page. The image that is being shown on the page is not the full image.
    I'm not sure if this is the right place to ask for help.
    You can view the page at http://www.fullfocuscp.com

    This is the full image. You can see from the page that portions are cut off.


    Anyway, below, I have included both the CSS and HTML code.

    Thanks in advance for the help.

    CSS:
    Code:
    /*-----	Simple reset  ----*/
    
    *{
    	margin:0;
    	padding:0;
    }
    
    /*------ General ------*/
    html, body { height: 101%; }
    
    body {
    	background:url(images/back-of-church.jpg) no-repeat center center;  /* This image will be displayed fullscreen */
    	background-size:cover;  /* The Magic */
    	font-family: arial;
    	font:14px/1.3 'Segoe UI',Arial, sans-serif;
    }
    
    /*------ Header  -------*/
    	
    #nav-bar {
    	top: 0;
    	height: 35px;
    	line-height: 35px;
    	padding: 10px;
    	position: fixed;
    	width: 100%;
    	z-index: 100000;
    	background-color:rgba(17,17,17,0.20);
    }
    
    #site-logo {
    	float: left;
    	height: 35px;
    	width: 500px;
    	display: block;
    	background-image: url("images/logo.png");
    }
    
    #toptext {
    	color: #ffffff;
    	font-size: 26px;
    	font-family: arial;
    	font-weight: bold;
    	left: 42%;
    	margin-top: 10px;
        margin-left: 50px;
    	position: absolute;
    	text-decoration: none;
    	top: 0;
    	vertical-align: middle;
    }
    
    #toplinks {
    	float: left; 
    	margin-left: 350px;
    }
    
    #toplinks a {
    	color: #990000;
    	font-size: 14px;
    	font-weight: bold;
    	text-decoration: none;
    }
    --------------------------------------------------------------------------------
    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]-->
    		
    <!--[if IE]>
    <style style="text/css">
    #nav-bar {
    	background-image: url("images/black-bg-transparent.png");
    }
    </style>
    <![endif]-->
    </head>
        
    <body>
    
    	<div id="nav-bar">
    		<a href="#" id="site-logo"></a>
    	<div id="toptext">
    		678 - 591 - 8121
    	</div>
    		
    	<div id="toplinks">
    			<a href="#">HOME</a> | 
    			<a href="#">PORTFOLIO</a> | 
    			<a href="#">PRICING</a> | 
    			<a href="#">ABOUT</a> | 
    			<a href="#">CONTACT</a>  
    	</div>			
    	</div>
    	
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    14
    Rep Power
    0
    try changing:
    Code:
    	background-size:cover;  /* The Magic */
    to:
    Code:
    	background-size: 100% 100%;  /* The Magic */
    	background-attachment: fixed;
    Doesn't work on IE8 or old browsers. IE8's a very old browser now anyway.

IMN logo majestic logo threadwatch logo seochat tools logo