CSS Question - Multiple Background Images

**voltage** · 29 Aug 2006, 02:37 AM

I learned here: http://www.w3.org/TR/css3-background/#layering that you can layer your background images.

I'm trying to assign to background images to a class, one positioned to the left and the other to the right, to create border effects.

Here is the html:

<td class="CenterBox" valign="top">

And here is the css:

.CenterBox {
background-image:url(../images/Side_LeftBorder.gif), url(../images/Side_RightBorder.gif);
background-repeat: repeat-y,repeat-y;
background-position:left, right}

What am I doing wrong?

If I take out one side or the other it works, but not together.

**Kim** · 29 Aug 2006, 03:11 AM

css3 ? Have no idea how many browsers will support it ...

**voltage** · 29 Aug 2006, 03:15 AM

Oops, didn't realize. Nevermind then

**wolf99** · 5 Jan 2007, 07:13 PM

Hi I am trying to implement the same effect. IE one image on one side of the page bg and a different one on the other.

I'm not sure how to properly do it though.
obviously from the above posts layering in one element is not happening yet.

but is it possible to put one image in the <body> element, aligning it left, and define a <div> element directly inside the <body> and align it right?

**gjh42** · 9 Jan 2007, 06:13 AM

Yep, that's exactly how you would do it.

The second one would cover the first, in any places they overlap.

**wolf99** · 11 Jan 2007, 08:07 PM

Ok cheers for that, worked perfectly. One thing I note, though, is that if a refresh the page (in FF), the div contained image dissapears for longer, so the image defined in <body> appears by itself for a while.....

code I used, for those wanting to do the same

in templates/YOUR_TEMPLATE/common/tpl_main_page.php:
BELOW:

Code:

<body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>

I entered

Code:

<div id=bgLayer>

ABOVE:

Code:

</body>

I entered:

Code:

</div>

then in the stylsheet:
add your first image by layer. In this case as I am layering images to create a background I am starting with body.

add to body style:

Code:

    background-image: url(../images/firstLayerImage.jpg);/*use relative file path*/
    background-position: top left;/*(top/center/bottom left/center/right) or (x-% y-%) or (x-pos y-pos)*/
    background-repeat: no-repeat; /*or repeat or repeat-y or no-repeat*/
    background-attachment: fixed; /*or scroll */

then for every div I created, and every image layered I enter:

Code:

/*BOF bg layer div*/

div#bgLayer {
    width: 100%;
    background-image: url(../images/layerImage.jpg); /*use relative file path*/
    background-position: top right; /*(top/center/bottom left/center/right) or (x-% y-%) or (x-pos y-pos)*/
    background-repeat: no-repeat; /*or repeat or repeat-y or no-repeat*/
    background-attachment: fixed; /*or scroll */
    }
/*EOF custom bg div*/

**carilivia** · 15 Jan 2007, 12:36 PM

Hey...I just wanted to write in and say that this was EXACTLY what I was looking for!! I tried it and it worked perfectly in both Mozilla and IE
Thank you SO much!!!!!

**gjh42** · 17 Jan 2007, 12:24 AM

Even easier, if you're not using any background image already in #mainWrapper, is to put the first (left...) background image in body and the second (right...) one in mainWrapper.
Then no divs need to be added to the PHP code.
This does require that mainWrapper be 100% of body, or else there will be a gap around the second part.

Another point to note: You can make all this background image smaller than the full window by giving body a border.
border: 0 20px #112233;
will give you strips of that color on each side of your content, somewhat similar to the effect on this forum.

**KADesign** · 27 May 2007, 06:28 PM

I'm sorry...I'm really lost. No surprise there. I need two BG images also.

One is background:URL(images/back_h_s.jpg) no-repeat right top. The other is background:URL(images/back_h.jpg) no-repeat top.
How would I put that in the css?
I can't seem to get it right.

Thanks in advance for any help,
Kelly

**gjh42** · 29 May 2007, 07:47 AM

The exact answer to that depends on exactly where you want these background images to appear.

Do you want them at the edges of the screen, in the main page content area, or elsewhere?

A photoshopped image of what you want would be ideal.

Thread: CSS Question - Multiple Background Images

Thread Tools

Search Thread

Display

CSS Question - Multiple Background Images

Re: CSS Question - Multiple Background Images

Re: CSS Question - Multiple Background Images

Re: CSS Question - Multiple Background Images

Re: CSS Question - Multiple Background Images

Re: CSS Question - Multiple Background Images

Re: CSS Question - Multiple Background Images

Re: CSS Question - Multiple Background Images

Re: CSS Question - Multiple Background Images

Re: CSS Question - Multiple Background Images

Similar Threads

Multiple background images?

Trouble with CSS background images

CSS for different page background images

using background images in css

Customizing background...not simple CSS change question...

Posting Permissions