Responsive DIV and background - html

Question

For the first time i'm doing some responsive DIV'S and now i have made my responsive background and i wanted to my content look like this:
But it looks like this:
If someone could help me it would be great.. Here is my code that you see what i was doing
jsFiddle
HTML:
<div class="container">
<div class="leftColumn"><img src="projekt.png" width="400" height="400"></div>
<div class="rightColumn"><img src="projekt2.png" width="400" height="400"></div>
</div>
CSS:
.container {width:100%;}
.leftColumn {width:50%; float:left;}
.rightColumn {width:50%; float:left;}
#media(max-width:400px)
{
.leftColumn { width:100px; float:none; display:block; position:relative; background-color:red; }
.rightColumn { width:100px; float:none; display:block; position:relative; background-color:blue; }
}
Images are 400 x 400 pixels and background image is 1920 x 1080

Answer 1

For background, use background-size property (CSS3).
.container {width:100%;}
.leftColumn {width:50%; float:left;}
.rightColumn {width:50%; float:left;}
#media(max-width:400px)
{
.container {
width: 400px;
height: 400px;
background: url(http://www.extremedialer.com/wp-content/uploads/2013/10/bg-1.jpg);
background-size: 400px;
}
.leftColumn { width:100px; float:none; display:block; position:relative; background-color:red; }
.rightColumn { width:100px; float:none; display:block; position:relative; background-color:blue; }
}
#media (min-width:401px) and (max-width:800px)
{
.container {
width: 800px;
height: 800px;
background: url(http://www.extremedialer.com/wp-content/uploads/2013/10/bg-1.jpg);
background-size: 800px;
}
.leftColumn { width:200px; height:200px; float:left; margin: 20px; display:block; position:relative; background-color:red; }
.rightColumn { width:200px; height:200px; float:left; margin: 20px; display:block; position:relative; background-color:blue; }
}
http://jsfiddle.net/XmqNy/235/

Answer 2

try it in your css file:
#media(max-width:400px)
{
.leftColumn { width:100px; position:relative; background-color:red; }
.rightColumn { width:100px; position:relative; background-color:blue; }
}
You don't need to write display:none.