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

Discussion in 'Web Design and Development' started by Doju, Apr 11, 2009.

  1. Doju macrumors 68000

    Joined:
    Jun 16, 2008
    #1
    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. :(
     
  2. Dolorian macrumors 65816

    Dolorian

    Joined:
    Apr 25, 2007
    #2
    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! :)
     

    Attached Files:

Share This Page