How to make a seamless background image on a webpage properly?

Get Started
1

Hello !
Currently I have a large main image which I have divided into 5 different images. I wish to display the 5 images on a webpage to create the one big image. I used tables to create this effect but the images had white gaps between them. I was using a stylesheet to style the page but couldn’t find a way to remove the gaps using the style sheet. So I had to put cellpadding and cellspacing properties inside the table itself using table cellpadding=“0” cellspacing=“0”. But I did not want to do this really as I am a bit anal. I am new to webpage making, I’m wondering if using tables to do the task I am trying to do is the proper way, or there is a better way of doing it? Any help welcome.

2

another option could be to use css positioning to position each image exactly where you like to make them appear as one image.

3

There are different ways to create full screen backgrounds, with or without the use of javascript. You could do it with just one image (can have some strange stretch effects depending on the image you use) or multiple images.

As you would like to do it with multiple images you need to do that, like Kalon mentioned, by positioning divs:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,table,tr,td,th,p,img {
	margin: 0; 
	padding: 0; 
}

html, body {
	width: 100%;
	height: 100%;
}

body {

}

.left-top,
.right-top,
.left-bottom,
.right-bottom {
	width: 50%;
	height: 50%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	background: url(images/lt.gif);	
}

.right-top {
	left: 50%;
	background: url(images/rt.gif);		
}

.left-bottom {
	top: 50%;
	background: url(images/lb.gif);	
}

.right-bottom {
	left: 50%;
	top: 50%;
	background: url(images/rb.gif);		
}

#wrapper  {
	width: 60%;
	min-height: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 1;
  	background: #FFF;
	filter: alpha(opacity=80);
  	opacity: 0.8; /* CSS 3 Stndard */
	border: solid #000;
	border-width: 0 1px;
}

* html #wrapper {
	height: 100%;	
}
</style>
</head>

<body>
<div class="left-top"></div>
<div class="left-bottom"></div>
<div class="right-top"></div>
<div class="right-bottom"></div>

<div id="wrapper">

</div>

</body>
</html>

This is an example with just four images. I see you would like to use 5 so you just need to position them too your requirements.