将背景图像 (:relative) 右对齐答案

【问题标题】：Aligning background-image (:relative) to right将背景图像 (:relative) 右对齐
【发布时间】：2016-09-05 09:27:36
【问题描述】：

我有一个网站，其中有一个标题 background-image，其样式采用以下 CSS：

.header {
    position: relative;
    min-height: 436px;
    background: url("../img/holland-canal.jpg") no-repeat;
    background-size: cover;
}

就像现在一样，在较低分辨率下调整窗口大小时，图像会向左对齐，因此图片的右侧部分会被截断。图片的右侧包含桥，我希望它始终可见。

是否可以将background-image 定位为始终与右侧对齐，即在调整到较小的窗口时图像的左侧部分被截断？

【问题讨论】：

标签： css responsive-design

【解决方案1】：

将此添加到您的 CSS：

.header{
    background-position:right;
}

因为具有header 类的 div 包含背景图片

输出

更多信息，请查看this

【讨论】：

【解决方案2】：

添加background-position

.header {
    position: relative;
    min-height: 436px;
    background: url("../img/holland-canal.jpg") no-repeat;
    background-size: cover;
    background-position: right;
}

【讨论】：

就是这样！谢谢