Question

我试图找出如何将背景图片添加到现有网页模板中，因此图片位于屏幕底部。

模板是：http://www.templatescreme.com/free-website-profi-admin 这里有一个演示：http://www.templatescreme.com/demo/profi-admin/170

不确定我是否可以在小提琴上做这个，所以我已经链接到模板的例子。

模板已经有一个背景图片（bg.gif），它是屏幕顶部的黑色和灰色横幅。我想保留它们，但添加另一个以替换屏幕下方的灰色背景。

通常我只是更改身体上的css来指定图像：

background:url('bg.jpg') 100% 100% no-repeat; background-attachment:fixed; background-position:bottom; background-size:contain;

显然，这样做会删除现有图像。有什么方法可以在同一个屏幕上显示这两个图像吗？

由于

更新FIDDLE已添加

我添加了一个显示问题的小提琴......波浪应位于屏幕底部并填满整个宽度。

Answer 1

#divid {
    background-image: url(../images/bg.gif), url('../images/bg.jpg');
    background-position: left top, bottom;
    background-repeat: repeat-x, no-repeat;
    background-attachment: initial, fixed;
    background-size: initial, contain;
}

这样的事情应该有效。确保所有属性中的两个图像都有值。

Answer 2

通过保留现有（原始）图像并创建DIV 100％x 100％，然后将背景图像应用到该图像，我已经完成了这项工作。

我用过：

.test {
    position:fixed;
    padding:0;
    margin:0;
    width: 100%;
    height: 100%;
    background:url('../images/bg.jpg') 100% 100% no-repeat; 
    background-attachment:fixed; 
    background-position:bottom; 
    background-size:contain; }
}

这似乎让它发挥作用。

由于

将图像添加到现有的Web模板

2 个答案: