css - 在页面两侧设置固定背景图像

标签 css background-image css-position

我正在尝试创建我的页面,以便背景图像覆盖页面的一侧,而中心没有任何内容,因为那是内容所在的位置。我希望这些图像固定在它们所在的位置,即使用户调整窗口大小使它们不在屏幕上也是如此。我至少知道如何设置图像,但不知道如何将它们固定到位。

我想我能想到的一个例子是如何http://www.halolz.com/已成立。

最佳答案

通常这样做的方法是将背景图像应用到 HTML 正文,然后将页面的所有内容放入页面居中的容器中。

HTML:

<body>
    <div class="container">
         My content
    </div>
</body>

CSS:

html, body {
    padding: 0;
    margin: 0;
}
body {
    background: red; /* change this to your background image */
}

.container {
    background: white;
    width: 400px; /* adjust this to the proper width */
    margin: 0 auto;
}

JSFiddle:https://jsfiddle.net/13xaqh6z/

关于css - 在页面两侧设置固定背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30109832/

相关文章:

javascript - 使 2 个 div 响应地与其他 2 个 div 重叠

css - 移动 Bootstrap CSS 上的背景图片

html - 将具有不同尺寸的图像对齐成一行

html - 我可以使用 CSS 为表格列着色而不为单个单元格着色吗?

javascript - React元素中的短动画

css - ASP.NET MVC 网站,如何为 div 生成背景图像但 img 在远程驱动器上

css - 背景图像在 1024px 以上消失

html - 如何在绝对位置父级上设置子级高度

css - gmail 邮件中的绝对定位

html - 将按钮粘贴到可滚动 div 的右上角