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

Question

I'm trying to work out how to add a background image to an existing web template, so the image sits at the bottom of the screen.

The template is : http://www.templatescreme.com/free-website-profi-admin and a demo is here : http://www.templatescreme.com/demo/profi-admin/170

Not sure if I can make this on fiddle, so I've linked to examples of the template.

The template already has a background image (bg.gif) which is the black and grey banners at the top of the screen. I'd like to keep them, but add another to replace the grey background further down the screen.

Normally I'd just change the css on the body to specify the image:

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

Obviously doing this will remove the existing image. Is there any way I can get the two images on the same screen ?

Thanks

update FIDDLE added

I've added a fiddle that shows the issue..the waves should be at the bottom of the screen and fill the full width.

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;
}

Something like this should work. Make sure to have values for both images in all properties.

Answer 2

I've got this working, by leaving the existing (original) image in place and creating a DIV 100% x 100% and then applying a background image to that.

I've used:

.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; }
}

And that seems to have allowed it to work.

Thanks