Tom Tom - 6 months ago 9
HTML Question

Adding Image to existing web template

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.

Tom Tom
Answer

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