Clever Geek Handbook

Why doesn't this div have a background image inside the table display?

JSFiddle.

Why isn't it displayed .col-left-bg-image

?

I just realized that it is not showing because there is no content in it. So I checked by putting in it ...

and giving it background-size:100% 100%

(Originally it was auto 100%

). But the result shows a div with background-image

, but it doesn't accept height

100% of the parent (i.e. .col-left

): s JSFiddle here

I have also tried using inline img

element instead of div

with background-image

, but that leads to 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>
Run codeHide result


+3


source to share


2 answers


Full solution (with image alignment to the 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;
}


FIDDLE: https://jsfiddle.net/lmgonzalves/tpu10dxu/7/

+2


source


I just added "height: 100%" to the "col-left-bg-image" class in the second JSFiddle and it seems to work fine. The "background size" of the div will not be the same as the image inside the div. The image would resize the div so that the background image would not show: D

JSFiddle Here!



.col-left-bg-image {
    height: 100%;
    background: url("http://www.mediafire.com/convkey/7a01/xaagjmwa7yz1dgdzg.jpg?size_id=b") no-repeat;
    background-size: 100% 100%;
}

Let me know if that wasn't what you meant: D

+2


source






More articles:


All Articles