Question

我正在为基于WP高级主题的客户构建以下网站。正如您所看到的，我正在尝试将其设置为可以全屏应用图像。

http://www.dev-redakhelladi.co.uk.gridhosted.co.uk/about/

我遇到的问题是，当图像出现时，我现在正在显示一个水平滚动条。

我已经将图像位置设置为absolute，所以我认为这会阻止任何滚动条问题。有什么我做错了吗？

Answer 1

将此规则添加到body

body {
    overflow-x: hidden
}

Answer 2

您可能希望使用CSS而不是IMG元素将图像设置为背景图像。

#content-wrapper {
    background-image: url('http://www.dev-redakhelladi.co.uk.gridhosted.co.uk/wp-content/uploads/2015/01/iStock_000008484482Medium.jpg');
}

Answer 3

您可以将其设置为背景图片：

.background-photo{
    background: url('url_to_image') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 4

您可以将图片用作身体标签宽度背景大小设置的背景，以覆盖图片以适合您的页面

Answer 5

首先，您不应将您的背景加载为img。使用background-image属性在某个固定定位元素上加载它。这样，当图像不可用时，您将不会有一个丑陋的浏览器占位符说[image-not-found]。

其次，每当元素设置为100％宽度并为其添加填充时，它将在x轴上溢出。如果您不想这样做，请将overflow-x设置为隐藏在其父级上，如@abforce建议的那样。

添加完整背景图像的最佳方法是将其作为背景添加到固定定位div，它是body元素的直接后代。

以下是一个例子：

<body>
    <div class="full-background"></div>
    <!-- Here goes your content... --> 
</body>

CSS：

.full-background {
    position: fixed;
    background-image: url('link-to-your-image');
    background-size: cover;
    top: 0;
    width: 100%;
    height: 100%;
}

绝对CSS图像 - 100％宽度和高度

5 个答案: