HOWTO: have TWO background images on page

Stingraynut · #1 Apr 5, 2010, 08:16 PM

I wanted to have a gradient background image and on top of that an image which blends in to the background image.

This is easily done and the image extends down into the content area which is what I wanted.

In 'Body text & Links' i pasted

Code:

background: url(/wp-content/themes/atahualpa/images/bg_main.jpg) repeat-x;

this is the gradient image

In 'Add HTMML/CSS Inserts' I pasted

Code:

#container{
background: url(/wp-content/themes/atahualpa/images/bg_laptop.jpg) no-repeat;
}

This is an image whose edges are the same as the gradient background, so it blends in.

No URL because it's only on a test site which will be wiped.

I searched here and couldn't find the answer so have posted this, hope it helps someone.