剪切/重新排列背景居中而不是调整大小

Question

我有一个小测试网站，div的宽度减少到50％，当我们点击按钮时会出现另一个div。 这是我的codepen

单击按钮时，图像会调整大小。 因为我正在使用：message{ a="something"; b="something else" } 但我希望图像向左移动一点，以便它居中。

Answer 1

你可以做一件简单的事情：

只需从content-container div中移除bg图片，然后将其添加到body

即可

body{
  background: url("http://foto-muehlbacher.at/wp-content/uploads/2014/01/Landschaft33-1.jpg");
}

这是一个有效的例子：

$('#button').click(function(){
  $('.new-content').toggleClass('half').delay(0).fadeIn(200);
  $('.content-container').toggleClass('half').style.width = "50%".backgroundSize = "200%";
});

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}
body{
  background: url("http://foto-muehlbacher.at/wp-content/uploads/2014/01/Landschaft33-1.jpg");
}
.content-container {
  height: 100vh;
  display: block;
  background-size: 100%;
  float: left;
  width: 100%;
  position: relative;
  transition: .2s ease-in-out;
}
.new-content {
  display: none;
  overflow: auto;
  float: right;
  width: 0;
  height: 100vh;
  background: #f60;
  transition: .2s ease-in-out;
}
.new-content.half,
.content-container.half {
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-container">
  <div class="content">
  <div>text</div>
<div>text</div>
<div>text</div>
<button id="button">
Click me
</button>
  </div>
  </div>
<div class="new-content">
<p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
  </div>