Simple Beginner Question: Creating Background for Site from "Image Splices"

Doju · Apr 11, 2009

I want to create a background for a portion of my site that's an image, but cut into nine pieces ("spliced").

(Top Left) (Top Center) (Top Right)
(Middle Left) (Middle) (Middle Right)
(Bottom Left) (Bottom Center) (Bottom)

What code can I use to make this the background (preferably using div style=). I have the nine images uploaded as the nine different images, but how do I implement it?

Code:

<div style="width: auto; height: auto; background:; overflow:auto; padding:8px; margin-left:9px; margin-right:9px;">{TEXT}</div>

Help.

Dolorian · Apr 11, 2009

Would this be similar to what you want to create? (use the attached files to see it well)

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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Positioning Test</title>
<style type="text/css">

body {
	text-align: center;
	background: black;}

#wrapper {
	margin-left: auto;
	margin-right: auto;}

#row1 p, #row2 p, #row3 p {
	display: inline-block;
	background-color: gray;
	margin: 0;
	width: 200px;
	height: 200px;
	text-indent: -9999px;
	overflow: hidden;
	vertical-align: top;}

#uno {
	background: url(red.jpg);}

#dos {
	background: url(green.jpg);}
	
#tres {
	background: url(blue.jpg);}

#cuatro {
	background: url(blue.jpg);}
	
#cinco {
	background: url(red.jpg);}

#seis {
	background: url(green.jpg);}
	
#siete {
	background: url(green.jpg);}

#ocho {
	background: url(blue.jpg);}
	
#nueve {
	background: url(red.jpg);}

</style>
</head>

<body>
<div id="wrapper">
	<div id="row1">
		<p id="uno">Text</p><p id="dos">Text</p><p id="tres">Text</p>
	</div>
	<div id="row2">
		<p id="cuatro">Text</p><p id="cinco">Text</p><p id="seis">Text</p>
	</div>
	<div id="row3">
		<p id="siete">Text</p><p id="ocho">Text</p><p id="nueve">Text</p>
	</div>
</div>
</body>

</html>

Just change the url within each background imageand the width and height of the p for the ones for your image and it should work!

Search

Search

Simple Beginner Question: Creating Background for Site from "Image Splices"

Doju

macrumors 68000

Dolorian

macrumors 65816

Attachments

Our Staff