如何在不全屏时使背景图像引导响应

Question

我有一个设计，我正在转换为Bootstrap响应，但遇到了一些问题。

1. 如何使非全宽背景图像响应
2. 无论视口大小如何，如何使主表单内容与图像顶部保持正确的距离。

模拟 image

Website

我非常感谢任何指针

Answer 1

以下是一个简单的选项，根据您的模型 - 网站。

1. 创建在页面上居中对齐的父DIV。
2. 将背景图像应用于此DIV并将其最大宽度设置为100％。
3. 创建另一个位于父DIV顶部的div（并且相对于父DIV）。
4. 将其上边距设为所需的百分比。
5. 建议您在媒体查询上创建这些样式以进行自适应显示。

有很多StackOverflow主题可以帮助您完成上述步骤。

HTH。

Answer 2

要解决问题1：在身体上你可以使用：background-size：contain;

Answer 3

首先，对于背景图片：

div.someclass{ 
 background: url(images/bg.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

这将使您的背景图像响应，即它将根据查看页面的显示大小进行调整。

其次，要在任何设备上保持主要表单内容与上面的适当边距，就是为刚为主要内容创建的div提供相对保证金：

div.someclass{
margin-top:5%;
}

根据您的要求更改上述 5％。