背景画像の繰り返し方を定義

１．ｘ軸方向にのみ繰り返す（background-repeat: repeat-x）
２．ｙ軸方向にのみ繰り返す（background-repeat: repeat-y）
３．背景画像を繰り返さない（background-repeat: no-repeat）

css

box1{
　　　width: 150px;
　　　height: 80px;
　　　padding: 10px 0px 0px 10px;
　　　border: solid #FF9999 1px;
　　　background:url(img/haikei2.gif);
　　　background-repeat:repeat-x;
}

.box2{
　　　width: 150px;
　　　height: 80px;
　　　padding: 10px 0px 0px 10px;
　　　border: solid #FF9999 1px;
　　　background:url(img/haikei2.gif);
　　　background-repeat:repeat-y;
}

.box3{
　　　width: 150px;
　　　height: 80px;
　　　padding: 10px 0px 0px 10px;
　　　border: solid #FF9999 1px;
　　　background:url(img/haikei2.gif);
　　　background-repeat:no-repeat;
}

3 × 3 の表示

<style type="text/css">
    html, body {
        padding: 0;
        margin: 0;
    }
    .grid3x3 {
        display:table;
        height:100%;
        width:100%;
    }
    .grid3x3 > div {
        display:table-row;
        width:100%;
    }
    .grid3x3 > div:first-child,
    .grid3x3 > div:last-child {
        height: 100px;
    }
    .grid3x3 > div > div {
        display:table-cell;
    }
    .grid3x3 > div > div:first-child,
    .grid3x3 > div > div:last-child {
        width:100px;
    }

    div {
        outline: 1px solid orange;
    }

</style>
<div class="grid3x3">
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
    <div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</div>

3 × 3 の表示

<style type="text/css">
    html, body {
        padding: 0;
        margin: 0;
    }
    .grid3x3 {
        display:table;
        height:100%;
        width:100%;
    }
    .grid3x3 > div {
        display:table-row;
        width:100%;
    }
    .grid3x3 > div:first-child,
    .grid3x3 > div:last-child {
        height: 100px;
    }
    .grid3x3 > div > div {
        display:table-cell;
    }
    .grid3x3 > div > div:first-child,
    .grid3x3 > div > div:last-child {
        width:100px;
    }

    div {
        outline: 1px solid orange;
    }

</style>
<div class="grid3x3">
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
    <div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</div>

HTML

<div class="table">
    <div class="row">
        <div class="cell1">row 1</div>
        <div class="cell2"></div>
        <div class="cell3"></div>
    </div>
    <div class="row">
        <div class="cell1">row 2</div>
        <div class="cell2">
            <img src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" />
        </div>
        <div class="cell3"></div>
    </div>
    <div class="row">
        <div class="cell1">row 3</div>
        <div class="cell2"></div>
        <div class="cell3"></div>
    </div>
</div>

CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    width:100%;
    height:100%;
    border:1px solid #000;
}
.row {
    display:table-row;
    height:100%;
}
.cell1, .cell2, .cell3 {
    display:table-cell;
    width:33%;
    height:100%;
    border:1px solid #CCC;
}
.cell2 > img {
    width:100%;
    height:auto;
}