Results 1 to 2 of 2

Thread: How to get background to fit across all browsers?

  1. #1
    Join Date
    Sep 2012
    Posts
    1

    How to get background to fit across all browsers?

    I know there are lots of examples but none really explain how to do it and my attempts have failed. I will post my code for both my style and source and if someone could explain how to do it I would appreciate it. Thanks:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Iron Hammer Gaming</title>
    <link href="CSS/style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
    background: url(newbg.jpg) no-repeat;
    background-size: 100%;
    }
    </style>
    <script type="text/javascript">
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    </head>
    
    <body onload="MM_preloadImages('Images/navbar_03.jpg')">
    
    <div id="header1"><img src="Images/top banner.png" width="1100" height="300" /></div>
    
    <div id="header"><img src="Images/bottom banner.png" width="1000" height="563" /></div>
    
    <div id="navigation_bar"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Images/navbar_01.jpg',0)"><img src="Images/navbar_01.jpg" width="200" height="40" id="Home" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Forum','','Images/navbar_02.jpg',0)"><img src="Images/navbar_02.jpg" width="200" height="40" id="Forum" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Join','','Images/navbar_03.jpg',1)"><img src="Images/navbar_03.jpg" width="200" height="40" id="Join" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','Images/navbar_04.jpg',0)"><img src="Images/navbar_04.jpg" width="200" height="40" id="Contact" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Faq','','Images/navbar_05.jpg',0)"><img src="Images/navbar_05.jpg" width="200" height="40" id="Faq" /></a></div>
    
    
    <div id="content_wrap">
      
    <div id="left_content">News and Events</div>
    
    <div id="right_content">Teamspeak</div>
    
    <div id="center_content">
      <p>Introduction to Clan</p>
    </div>
    
    <div id="bottom_content">
      <p>Recent Posts</p>
      <p>Recent members</p>
      <p>Game servers</p>
      <p>ect</p>
    </div>
    
    </div>
    
    <div id="footer" style="text-align: center">IronHammerGaming All Rights Reserved 2012</div>
    
    </body>
    </html>
    HTML Code:
    @charset "utf-8";
    @import url("../webfonts/JEFFE/stylesheet.css");
    @import url("../webfonts/Plane_Crash/stylesheet.css");
    @import url("../webfonts/COUTURE_Bold/stylesheet.css");
    
    
    
    /* CSS Document */
    
    
    #header1 {
    	height: 300px;
    	width: 1100px;
    	margin-top:auto;
    	margin-bottom:auto;
    	margin-left:auto;
    	margin-right:auto;
    	}
    
    #header {
    	height: 563px;
    	width: 1000px;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 30px;
    	border: 1px solid #000;
    	}
    	
    #content_wrap { 
    	height:1000px;
    	width:1200px;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top:30px;
    }
    	
    #left_content {
    	height: 600px;
    	width: 240px;
    	float: left;
    	margin-right: 2px;
    	color: #FFF;
    	font-size: 24px;
    	text-transform: none;
    	line-height: normal;
    	text-decoration: underline;
    	font-weight: bold;
    	letter-spacing: normal;
    	word-spacing: normal;
    	text-align: center;
    	white-space: normal;
    	background-image: url(../Images/leftcontent.png);
    }
    	
    #right_content {
    	height: 600px;
    	width: 240px;
    	float: right;
    	margin-left: 2px;
    	background-image: url(../Images/leftcontent.png);
    	color: #FFF;
    	font-size: 24px;
    	font-weight: bold;
    	text-align: center;
    	text-decoration: underline;
    }
    	
    #center_content {
    	height: 600px;
    	width: 700px;
    	margin-left: auto;
    	margin-right: auto;
    	font-size: 40px;
    	text-decoration: underline;
    	font-weight: bold;
    	text-align: center;
    	color: #FFF;
    	background-image: url(../Images/center.png);
    	background-repeat: no-repeat;
    	background-position: center;
    	border: thin none #000;
    	padding: 0px;
    	font-style: normal;
    	font-family: "Arial Black", Gadget, sans-serif;
    }
    	
    #bottom_content {
    	height: 270px;
    	width: 1000px;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 30px;
    	background-image: url(../Images/bottom.png);
    	color: #FFF;
    }
    
    #footer {
    	height: 25px;
    	width: 1000px;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 10px;
    	color: #FFF;
    }
    
    #navigation_bar {
    	height: 40px;
    	width: 1000px;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: auto;
    	margin-bottom: 30px;
    	border: 1px solid #000;
    }
    	
    #content_wrap #center_content p {
    	font-family: Tahoma, Geneva, sans-serif;
    }

    Also, whats the long line of java text from in the first HTML code post? I never typed that out and the only thing I could think of would be me importing the navbar from PS?
    Last edited by Acoustic; 21 Sep 2012 at 06:53 PM.

  2. #2
    Join Date
    Apr 2012
    Posts
    6
    i know of one it is http://srobbin.com/jquery-plugins/backstretch/ but im trying to figure out how to get it working on my page because after you download it it has like three different types i think that you can use grunt, jquery.backstretch, jquery.backstretch.min and i really dont know witch one to use

Similar Threads

  1. Not sure if this question will fit here
    By ArtbyAndrew in forum Web Design, HTML Reference and CSS
    Replies: 0
    Last Post: 20 Jan 2010, 06:59 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •