CSS quesions about backgrounds

NeVeR

Hi,

I'm making a page where there is a border around the page what i've done is make it into 3 images 1 top 1 bottom and a main(middle) background

No can i in CSS place all these in 1 area

i've tried this but it doesnt work

.main{
background-image:url(bg.gif);
background-repeat:repeat-y;
background-image:url(top.gif) no-repeat top;
background-image:url(bottom.gif) no-repeat bottom centre;
 }

No the 1st background image works others dont .. but i didnt really think they would as i thought i was doing something wrong.

any help would be great
thanks.

Gordon

I'm pretty sure you can only have one background-image for one element.

Is this to make a header, middle, footer thing for the whole page or is it for a smallish div class?

NeVeR

ya..

I couldnt remember how i did it, but i figured it out. I forgot to use <div id-"top"> and all the others. I've restarted the page using the correct CSS.

DJB

How'd you do it in the end?

NeVeR

well on the html page i gave the top and bottom there own tags

<div id="top"> image</div>

<div id="bottom"> images</div

and the css code was something like this.. I'm in work now and dont have the code. I only did the top and bottom and try the rest tonight

#top {
background-image: url(img);
background-position:top center;
background-repeat:no-repeat; }

same for the bottom with a few changes.. I might be leaving something out i'll check the code when i get home.

DJB

That sounds about right. Just wasn't sure how you were doing it from your reply. You should be fine with that approach!

Rgds, Dave

Winters

Multiple background images are only supported in CSS3. Which, well .. browsers as of yet have not properly implemented (Bar Webkit). Most of them havnt even fully implemented CSS2 properly so give them a bit of time.

More info can be found here: http://www.css3.info/preview/multiple-backgrounds/

So, for the forseeable future until every browser people use is CSS3 complient you shall have to get used to layering div's to produce the multiple backgorund images you require.

DJB

Yeah, I usually nest my div's to get the disired effect. It'll be awhile before we see CSS3 in play I'd say. IE9?

Winters

DJB wrote: »

Yeah, I usually nest my div's to get the disired effect. It'll be awhile before we see CSS3 in play I'd say. IE9?

Well, IE8 does render Acid2 correctly but only when in standards mode (And not default mode so it still technically fails).

However seeing as the majority of IE users are still on IE6 and not on IE7 it will be a long time till we can implement CSS2 let alone CSS3 without worry on websites.

Goodshape

Standards mode isn't the... erm... standard mode? WTF?


//brief investigation later...

http://en.wikipedia.org/wiki/Internet_Explorer#Version_8

Wikipedia wrote:

IE8 standards mode breaks compatibility with previous versions of Internet Explorer by more strictly adhering to web standards.[14] IE8 standards mode is not enabled by default, but can be triggered by inserting a special flag into a web page.

Ah yes, because they've already dug the hole and can't climb out of it just yet. At least the switch can be made server side.

Winters

I would hope that by having a correct DOCTYPE in the top of the html output that it would use standards mode thus making our life easier.