css image on top of another for website background

Question

Hi there I am trying to make and 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); 
}

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

http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css -- this SO question outlines the CSS3 implementation you're hoping for without being add extra markup easily. — danjah, Jul 04 '11 at 11:51

Joonas · Answer 1 · 2011-07-04T12:09:19.137

4

Im thinking this is what youre after.

http://jsfiddle.net/wpqDy/

html {
    height: 100%;
    width: 100%;
    background: url("bg.jpg") repeat 0px 3px;
}

body {
    background: url("bg_top.jpg") repeat-x top left;    
    height: 100%;
    width: 100%;
}

edited Jul 04 '11 at 12:09

answered Jul 04 '11 at 11:48

Joonas

7,227
9
40
65

I tried this it did work but I went with the css3 method. But that jsfiddle tool I had a little play with, it's really cool :) – Josip Gòdly Zirdum Jul 04 '11 at 11:58
The websites niche is more towards people who are quite decent with computers already and are younger folk so I think IE6-IE8 wont be such an issue, if it does not load it's still alright because I have a decent white background which still makes the site completely usable :) I'd rather advocate css3 so more people start updating browsers :P – Josip Gòdly Zirdum Jul 04 '11 at 12:08

score 2 · Answer 2 · answered Jul 04 '11 at 11:44

2

You'll need to put background images on two different containers. Perhaps something like this:

<body>
  <div id="page">
    <div id="content">
      ...
    </div>
  </div>
</body>


#page
{
  background:url(background.jpg); 
}

#content
{
  background:url(banner.jpg); repeat: repeat x;
}

answered Jul 04 '11 at 11:44

Kon

27,113
11
60
86

not an option. The template on how the software is made wont allow it...well it would be far too much editing and looking through files to do it. http://www.minecraftforum.net/ have a look at their background...I want to do something like that. I looked at their css and I tried it but it did not work – Josip Gòdly Zirdum Jul 04 '11 at 11:47
Perhaps you should mention something about your weird template restrictions in the question? – Kon Jul 04 '11 at 11:52

score 1 · Accepted Answer · answered Jul 04 '11 at 11:49

1

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

answered Jul 04 '11 at 11:49

Chowlett

45,935
20
116
150

No worries. You should be aware that the fallback in browsers which don't support multiple backgrounds is to display _nothing_. If you care about IE6-8, you will want another method, or a fallback via, say, http://www.modernizr.com – Chowlett Jul 04 '11 at 12:10

css image on top of another for website background

3 Answers3