html - 在 CSS 中为背景图像添加边距

Question

我正在尝试为背景图像添加固定边距，但遇到了问题。我希望图像占据大约 70% 的屏幕宽度，位于屏幕的右中央，然后在顶部、底部和右侧具有相等的边距。

这是我目前的背景图片代码:

html, body {

width: 100%;
height: 100%;
margin: 0 auto;
font-family: 'Roboto Condensed', sans-serif;
background: url(http://japesfawcett.com/img/bg.jpg) no-repeat right center fixed; 
background-size: 70% auto;

}

我已将我当前的全部代码放入笔中，here .

这是一张图片，也有助于说明我正在努力实现的目标:

Answer 1

您还需要考虑调整 background-position。

这是一个示例，在顶部/右侧/底部有 30px，图像占宽度的 70%:

html {
  height: 100%;
  background: linear-gradient(to right,white 30%,red 0);
}

body {
  height: 100%;
  margin: 0 auto;
  background-image: url(https://i.picsum.photos/id/107/800/800.jpg);
  background-size: calc(70% - 30px) calc(100% - 60px);
  background-position: right 30px top 30px;
  background-repeat: no-repeat;
}

您还可以考虑background-clip 宽度填充或边框:

html {
  height: 100%;
  background: linear-gradient(to right,white 30%,red 0);
}

body {
  height: 100%;
  padding:30px 30px 30px 0;
  box-sizing:border-box;
  margin: 0 auto;
  background-image: url(https://i.picsum.photos/id/107/800/800.jpg);
  background-size: 70% 100%;
  background-position: right;
  background-clip:content-box;
  background-repeat: no-repeat;
}