响应DIV和背景

Question

我第一次做了一些响应式DIV'，现在我已经做了我的响应背景，我希望我的内容看起来像这样：

但它看起来像这样：

如果有人可以帮助我，那就太棒了。这是我的代码，你看到我在做什么

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; }

}

图像为400 x 400像素，背景图像为1920 x 1080

Answer 1

在你的css文件中试试：

@media(max-width:400px)
{
    .leftColumn  { width:100px;   position:relative; background-color:red; }

    .rightColumn { width:100px;   position:relative; background-color:blue; }

}

你不需要写display：none。

Answer 2

对于背景，请使用background-size属性（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/