Search code examples
cssimage

CSS image on top of another for website background

Hi there I am trying to make an image on top of another in 1 tag.

Basically, I want an image to be the banner on top, so repeat-x then under it, I want the background image repeated multiple times

So something like this

body {
  background:url(banner.jpg); repeat: repeat-x;
  background:url(background.jpg); 
}

I am not 100% sure how to do it...I think that explains how I would like it.

I may also want something on the bottom added later so like after that background is done I would want something like:

background:url(footer.jpg) repeat: repeat-x; bottom
Solution

  • CSS3 has support for multiple backgrounds on a single element; this is relatively widely supported, except for IE <= 8. You can write the following:

    body
{
  background-image: url(banner.jpg), url(background.jpg);
  background-repeat: repeat-x, repeat;
}