Can't see any background image - in IE 7 and IE 8 - html

Question

For some reason, iE8 and IE7 are not behaving like other browsers, and the relative position element background image, doesn't appear.
Any suggestions please?
The HTML
<div id="container1">
<div class="main-column">
<h2>Hello tittle 1</h2>
<div class="text-column">
<p>I'm on column 1 and I like it</p>
<p>I'm on column 1 as well</p>
</div>
</div>
<div class="main-column">
<h2>Hello tittle 2</h2>
<div class="text-column">
<p>I'm on column 2 and I like it</p>
<p>I'm on column 2 as well</p>
</div>
</div>
<div class="main-column">
<h2>Hello tittle 3</h2>
<div class="text-column">
<p>I'm on column 3 and I like it</p>
<p>I'm on column 3 as well</p>
</div>
</div>
</div>
Notes:
a) Absolute position instead of relative will ruin the all layout.
b) I have a space on my background declaration so it's not a space issue.
Try I:
The same markup, but now with absolute position:
#container1 {
background-color: red;
text-align: center;
}
.main-column {
display: inline-block;
}
.main-column h2 {
width: 220px;
height: 235px;
padding-top: 110px;
position: absolute; /* <<-- Changed */
background: url('http://s24.postimg.org/ossqwb7hh/carica_Kairos.png') no-repeat center top;
margin: 0 auto;
}
.text-column {
width: 220px; /* <<-- Make it equal to the h2 */
height: 300px;
background-color: yellow;
margin: 120px auto 0 auto;
padding-top: 270px; /* <<-- Adjust */
}
.text-column p {
padding: 0 50px;
}
same issue. IE8 and IE7 not displaying images. :(

Answer 1

I'm not quite sure what you're looking to do, but since the h2 is a block item, it might not obey your height/width CSS. I would float or absolute position it.

Answer 2

EDIT: Here is a working workaround, please test it on youtr machine since I'm using IE8 emulator. JSFiddle
HTML
<div id="container1">
<div class="main-column">
<div class="h2"><span>Title 1</span><img src="http://s24.postimg.org/ossqwb7hh/carica_Kairos.png" width="230" height="243" /></div>
<div class="text-column">
<p>I'm on column 1 and I like it</p>
<p>I'm on column 1 as well</p>
</div>
</div><br>
<div class="main-column">
<div class="h2"><span>Title 1</span><img src="http://s24.postimg.org/ossqwb7hh/carica_Kairos.png" width="230" height="243" /></div>
<div class="text-column">
<p>I'm on column 1 and I like it</p>
<p>I'm on column 1 as well</p>
</div>
</div><br>
<div class="main-column">
<div class="h2"><span>Title 1</span><img src="http://s24.postimg.org/ossqwb7hh/carica_Kairos.png" width="230" height="243" /></div>
<div class="text-column">
<p>I'm on column 1 and I like it</p>
<p>I'm on column 1 as well</p>
</div> </div>
</div>
CSS
#container1 {
background-color: red;
text-align: center;
}
.main-column {
display: inline-block;
}
.main-column .h2 {
width: 220px;
height: 244px;
padding-top: 110px;
position: relative;
/*background: url('http://s24.postimg.org/ossqwb7hh/carica_Kairos.png') no-repeat center top;*/
}
.main-column .h2 span{
z-index: 2;
position: absolute;
text-align: center;
line-height: 243px;
margin-top: -110px;
left: 0;
width:100%;
font-weight: bold;
font-size: large;
}
.main-column .h2 img {
position: absolute;
top: 0;
left: -4px;
z-index: 0;
}
.text-column {
width: 220px;
height: 300px;
background-color: yellow;
margin: -223px auto 0 auto;
padding-top: 220px;
}
.text-column p {
padding: 0 50px;
}
OLD answer below
It seems you are using <h2> like a block when its a header element. You should try these tips for now:
Explicitly declare display: block; on that element.
Explicitly declare them all as position: relative;
Change the <h2> tag to a <div>