html - table-cell 内に background-image を含むこの div がまったく表示されないのはなぜですか?

Question

JSFiddle。

.col-left-bg-imageまったく表示されないのはなぜですか？

---

内部にコンテンツがないため、表示されていないことに気付きました。...だから私はそれに入れてそれを与えてチェックしましたbackground-size:100% 100%（最初はそうでしたauto 100%）。しかし、結果として、 を持つ divが表示されますが、親 (つまり) の 100% のbackground-imagea はかかりません:s JSFiddle hereheight.col-left

---

また、 withimgの代わりにインライン要素を使用しようとしましたが、それは惨事につながります。ここで JSFiddle。divbackground-image

@import url(<link href='http://fonts.googleapis.com/css?family=Open+Sans:700,300,600,400' rel='stylesheet' type='text/css'>);
html, body {
    height: 100%;
    margin: 0;
}
.section-big { /* change the width/height here */
    height: 80%;
    width: 80%;
	margin:100px auto 25px;
}
.container {
    display: table;
    table-layout: fixed;
    margin: auto;
    height: 100%;
    width: 100%;
}
.col {
    display: table-cell;
    vertical-align: top;
    height: 100%;
}
.col-left-bg-image {
    background: url("http://www.mediafire.com/convkey/7a01/xaagjmwa7yz1dgdzg.jpg?size_id=b") no-repeat;
    background-size: 100% 100%;
}

.col-left {
	padding:0px 25px;
}



.col h3, .col h5 {
    padding: 0;
    margin: 0;
}
.col section:nth-child(1) {
    height: 30%;
}
.col section:nth-child(2) {
    height: 22%;
}
.col section:nth-child(3) {
    height: 22%;
}
.col section:nth-child(4) {
    height: 26%;
}
.col section:nth-child(odd) {
    background: aqua;
}
.col section:nth-child(even) {
    background: lime;
}



h3 {
	color:#6c6969;
	transition:color 0.3s ease 0s;
	font-family:'Open Sans', sans-serif;
	font-weight:600;
	font-size:40px;
}

h5 {
	color:#6c6969;
	transition:color 0.3s ease 0s;
	font-family:'Open Sans', sans-serif;
	font-weight:400;
	font-size:20px;
}

<section class="section-big">
    <div class="container">
        <div class="col col-left">
			<div class="col-left-bg-image"></div>
            <!-- <img src="http://www.mediafire.com/convkey/9642/57q0fpdevvo1999zg.jpg?size_id=b" alt="Tun Tun!" /> -->
        </div>
        <div class="col col-right">
            <section class="section-one">
                <h3>HEADING</h3>
                <h5>Paragraph paragraph</h5>
            </section>
            <section class="section-two">
                <h3>HEADING</h3>
                <h5>Paragraph paragraph</h5>
            </section>
            <section class="section-three">
                <h3>HEADING</h3>
                <h5>Paragraph paragraph</h5>
            </section>
            <section class="section-four">
                <h3>HEADING</h3>
                <h5>Paragraph paragraph</h5>
            </section>
        </div>
    </div>
</section>