CSS Forum

**brandonwaugh** · 04:21 PM

Here is my whole entire code. This isn't going to be a real website, this is just a school project, but i really need the repeating background image to stop repeating. If you would like the .rar file so you can see the whole page with the image then please ask.

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>Brandon's Super Awesome Website</title>

<style type="text/css">


html {height:100%;}
body {height:100%; margin:0; padding:0;}

#bg
{
position:fixed; top:0; left:0; width:100%; height:100%;
}

#content {position:relative; z-index:1;}



body {

	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	
	background-image:url(Winter.jpg);

	margin: 0;

	padding: 0;

	color: #000;

}

ul, ol, dl { 

	padding: 0;

	margin: 0;

}

h1, h2, h3, h4, h5, h6, p {

	margin-top: 0;

	padding-right: 15px;

	padding-left: 15px; 

}

a img { 

	border: none;

}



a:link {

	color: #42413C;

	text-decoration: underline; 

}

a:visited {

	color: #6E6C64;

	text-decoration: underline;

}

a:hover, a:active, a:focus { 

	text-decoration: none;

}





.container {
	width: 960px;
    margin:auto; 
}





.header {

	background: #ADB96E;

	border:groove;

	border-color:#F00;



}



.sidebar1 {

	float: left;

	width: 180px;

	background: #EADCAE;

	margin-top: 20px;

	margin-bottom: 150px;

	border:groove;

	border-color:#F00;

}

.content {

	background-color:#390;

	padding: 10px 0;

	width: 600px;

	float: left;

	margin-top: 50px;

	margin-left: 80px;

	margin-bottom: 200px;

	border:groove;

	border-color:#F00

}



.content ul, .content ol { 

	padding: 0 15px 15px 40px; 

}





ul.nav {

	list-style: none; 

	border-top: 1px solid #666; 

	margin-bottom: 15px; 

}

ul.nav li {

	border-bottom: 1px solid #666; 

}

ul.nav a, ul.nav a:visited { 

	padding: 5px 5px 5px 15px;

	display: block; 

	width: 160px; 

	text-decoration: none;

	background: #C6D580;

}

ul.nav a:hover, ul.nav a:active, ul.nav a:focus { 

	background: #ADB96E;

	color: #FFF;

}







.fltrt {  

	float: right;

	margin-left:8px;

}

.fltlft {

	float: left;

	margin-right:8px;

}

.clearfloat { 

	clear:both;

	height:0;

	font-size: 1px;

	line-height: 0px;

}

.footer {

	padding: 10px 0;

	background: #CCC49F;

	margin-top: 100px;

	position: relative;

	clear: both;

	border:groove; 

	border-color:#F00;

}





</style></head>



<body>



<div class="container">

  <div class="header">

   <center><h1>Brandon's Super Awesome Perfect Website</h1></center>

  <a href="#"><a href="#"></a></div>

  <div class="sidebar1">

    <ul class="nav">

      <li><a href="Home.html">Home</a></li>

      <li><a href="Aboutme.html">About</a></li>

      <li><a href="Photos.html">Photos</a></li>

      <li><a href="Contact.html">Contact</a></li></ul>

</div>

  <div class="content">

   <center><h1> Contact Me</h1></center>

    <p>Home Phone : (604)-872-3003</p>

    <p>Cell Phone : (604)-392-9222</p>

    <p>Email : [email]Brandon_Waugh5@hotmail.com[/email]</p>

    <p>Facebook : Brandon Waugh or <a href="http://www.facebook.com/profile.php?id=846505044">http://www.facebook.com/profile.php?id=846505044</a></p>

<h2></h2>

  </div>

    

    <div class="footer">

    

   <center> <p> &copy;2010 Brandon waugh</p></center>

    </div>

</div>

</div>

</body>

</html>

**davemies** · 10-25-2010, 12:48 AM

in the body declaration put this
background-repeat: no-repeat;

**mushget** · 10-25-2010, 05:24 AM

body
{
background-image:url('Winter.jpg');
background-repeat:no-repeat;
}

**LadynRed** · 10-25-2010, 10:12 AM

Or, using css shorthand: background: url(image.jpg) no-repeat;

**brandonwaugh** · 10-25-2010, 10:05 PM

That sort of helped, but altogether there are like 4 repeats, and it only got rid of on of them. :S

**flemming** · 10-26-2010, 03:56 AM

Thanks for resolving the issue.The same issue was on my website.

**LadynRed** · 10-26-2010, 08:37 AM

Well, you'd have to apply the same rules to any element where you do NOT want the background to repeat.

**CSM** · 10-26-2010, 12:57 PM

Here is a demo from me where I use full size background (does not matter how your resolution is, background is always 100%).

http://xhtml-valid-websites.com/foru...ery-navigation

**brandonwaugh** · 10-26-2010, 06:01 PM

But shouldnt there be no repeats at all? I did make the background 100%, so it should be the whole screen without a repeat right? Is there a mistake in there somewhere stopping it from being 100%?

**LadynRed** · 09:25 AM

Quote:

I did make the background 100%

You made the background DIV 100%, not the background IMAGE.
The width:100% isn't even necessary, that's the default behavior unless you give it some other dimension.

**brandonwaugh** · 10-27-2010, 10:45 PM

oh ok thanks!