Why doesn't .col-left-bg-image display at all?
I just realized that it is not displaying because it does not have any content inside it. So I checked by putting ... into it and giving it a background-size:100% 100% (Initially it was auto 100%). But as a result, the div with the background-image is displayed, but it does not take a height of 100% of the parent (i.e. .col-left) :s JSFiddle here
I also tried to use an inline img element instead of a div with background-image, but that results in disaster. JSFiddle here.
@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>Complete solution (with image align to right):
.col-left-bg-image {
background: url("http://www.mediafire.com/convkey/7a01/xaagjmwa7yz1dgdzg.jpg?size_id=b") no-repeat;
background-size: auto 100%;
height: 100%;
background-position: center right;
}