HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


[RESOLVED] - Multiple Background Images - IE v. THE REST

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#61373 (In Topic #13358)
Avatar

Community saint

My problem is that I cannot get IE to display multiple background images (CSS3 spec?) like the other popular browsers manage to do.

I've searched extensively on the web, and read voraciously from CSS textbooks, but I am no closer to solving this puzzle - if it is solvable at all.

The CSS I am trying to implement is the following ...

Code


.re_body {
width: 950px;
margin: 15px auto 15px auto;
padding: 0 0 0 0 !important;
color: #ffffff;
border: 1px solid #869aa7;
background-color: #12191f;
background-image: url("{$IMG,page_gl}"), url("{$IMG,page_g}"), url("{$IMG,page_t}");
background-repeat: no-repeat, repeat-x, repeat;
background-position: top left;
}

That is easily recognizable as an extract from current ocPortal global.css with a couple of additions, specifically the three background images; a glare, on top of a gradient, on top of a tile. They render precisely how I want them to in FF, Opera and Chrome, but I have been forced to add a darker background-color so that I can get a decent contrast between page and background for IE.

Any 'hack' (hands up everybody who remembers IE6) that 'forces' IE8 to recognize this display, without breaking it for the others, will be ever so gratefully received.

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#61374
Avatar

Community saint

Hello Fletch!

I don't know if this would help you, but refer to my Game Tutorial #2 where I show how to superimpose two images (a background image and a flash in the foreground)

You can add a new new Statement to create an Image class id at the bottom of the global.css which will enable you to superimpose images. You will have to test the width/height/padding in order to place the images exactly where you want them and place the new div in the HTML Template you want to use.

You may have to create 2 div, one inside the other for the 3 images. I'm not an expert, but my experimentation led me to use this method.;)

Jean
Back to the top
 
Posted
Rating:
#61379
Avatar

Community saint

Thanks for the response, Jean.

I'll go take a look at how you achieved the effect and see if I can adapt it to my requirement.

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#61695
Avatar

Community saint

I was intrigued by the possibility to get IE to display as layers, multiple background images CSS3 style.

I had done something similar with an image an a flash in my Fixed Width Game Tutorial #2 and thought it would be possible to expand on this. I finally got the time to work on a test site and here is what I came-up with.

You can take a look at the TEST SITE: ocTest
and compare the screens between FF and IE (I'm only testing for IE8)

I started out creating 3 images to try and emulate what Fletch did on his site. They are not as good as his, but they should serve to illustrate my method.

1- a tile of 128px/128px to serve as the main background
2- a gradient of 4px/1024px to repeat-x (horizontally)
3- a Top-Left image sitting on top of the other two

I used the div id already set-up for the Fixed Width "main_website" to contain the tile image
Added a second div id "gradient" for the gradient image
Added a third div id "topleft" to display the final top image

Here is my code for global.css:

Code

#main_website { /* #main_website targets only the main site screen, avoiding frames etc */
/*this is the background seen around our fixed width */
padding: 0 0 0 0 !important;
background-image: url("{$IMG,page_t}");
background-repeat: repeat;
background-attachment:fixed;
position: relative;
}

#gradient { /* #main_website targets only the main site screen, avoiding frames etc */
/*this is the background seen around our fixed width */
padding: 0 0 0 0 !important;
background-image: url("{$IMG,page_g}");
background-repeat: repeat-x;
background-attachment:fixed;
position: relative;
}

#topleft { /* #main_website targets only the main site screen, avoiding frames etc */
/*this is the background seen around our fixed width */
padding: 0 0 0 0 !important;
background-image: url("{$IMG,page_gl}");
background-repeat: no-repeat;
background-position: top left;
background-attachment:fixed;
position: relative;
}


#main_website #body_inner {
width: 960px;
position: relative;
margin: 0 auto 0 auto;
/*this is the background for the area within our fixed width */
background-color: #395a6f;
}
Here is the code to link these new div id to HEADER.tpl:

Code

{$,You can use body_inner to help you create fixed width designs; never put fixed-width stuff directory on ".re_body" or "body" because it will affects things like the preview or banner frames or popups}

<body class="re_body" id="main_website">
<div id="gradient">
<div id="topleft">
<div id="body_inner">
I can see two minor problems:
1- If someone has a monitor with a height greater than 1024px - the tile will still show properly, but the gradient will stop short on the vertical.
2- If the body_inner is smaller than 1024px, the gradient will adjust to the same height. I believe that this is due to the fact that I did not find the way to properly close the two new div in Header.tpl.

I would appreciate hearing from anyone who has tried a similar method of layering multiple images to find if it is a feasible way of doing this and see if there are shorthcoming in my present coding of it.

1-Should I use a longer gradient image?
2-How did you get your gradient to extend downward, Fletch?
3-How can I close my 2 extra div in HEADER.tpl without loosing their properties? (strangely, everything seems to works fine the way it is)
Back to the top
 
Posted
Rating:
#61705
Avatar

Community saint

Islander-aua said

1-Should I use a longer gradient image?
2-How did you get your gradient to extend downward, Fletch?
3-How can I close my 2 extra div in HEADER.tpl without loosing their properties? (strangely, everything seems to works fine the way it is)

Jean, good work. Will look REALLY closely at the construct as soon as I've come back from my little stint away in the Algarve. This might well be the solution to getting IE to display the same as the other browsers, and could probably be universally used for other site displays as well.

To answer a couple of your questions:
1. I actually have a 900px gradient image so your 1024 is more than adequate - I think.
2. I set the gradient to 'repeat-x', exactly the way you did.

The difference between your code and mine is that you have used divs to hold the images; mine was an in-line CSS property, and since IE doesn't support the multi-layer CSS3 property as yet, we have to kludge around the issue until IE9 looms over the horizon.

Once again, thanks for delving into the problem …

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#61833
Avatar

I've just skimmed this topic but since you mentioned that you had to tweak your colors to match just in IE, I thought I'd point out in case you didn't know that IE and Photoshop have a known PNG gamma issue.

More specifically, PNG images saved from Photoshop (and probably other software, too) and rendered in Internet Explorer have an incorrect gamma, making them look either too bright or too dark (I forget which off-hand).

The solution is to fix the gamma using a program like PNGGauntlet, PNGcrush or others. It quickly optimizes the images, cutting the sizes a little, and making them render consistently cross browsers.

Back to the top
 
Posted
Rating:
#61842
Avatar

Community saint

Thanks for the input and the pointers, Allen. I shall certainly try to make use of the 'PNG-fixer' proggys that you've mentioned.

My problems isn't the colour display, it is the fact that IE refuses to play nice and build multi-layer background images like the other browsers do.

Sunning myself at the moment, so won't be dealing with the problem (seriously) until I get back.

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#62906
Avatar

Community saint

Islander-aua said

I would appreciate hearing from anyone who has tried a similar method of layering multiple images to find if it is a feasible way of doing this and see if there are shorthcoming in my present coding of it.

Hi, Jean.

Here to report a failure trying out your code. I've probably missed something. Tried it in the early hours of the morning (didn't get to bed until 6 a.m. - there's geeky for you!) and 'broke' the site several times. Thank goodness for ocP's restore functionality which quickly put things back as they were!

Reason for trying this out was my impulsive act of downloading IE9 (beta) which I thought had addressed HTML5 and CSS3. Can't say I discovered that it did. The triple-image layered background still does not display in IE9. Perhaps I need to re-write the properties, but I assumed it was a matter for the browser, since the other browsers do it well enough.

One other feature of IE9 that might interest the staff is that my IOTD box suddenly began to display a vertical scrollbar - something it doesn't do in any other browser - not even IE8.

Needless to say, I no longer have IE9 installed …

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#62907
Avatar

Community saint

Fletch said

Islander-aua said

I would appreciate hearing from anyone who has tried a similar method of layering multiple images to find if it is a feasible way of doing this and see if there are shorthcoming in my present coding of it.
Hi, Jean.

Here to report a failure trying out your code. I've probably missed something. Tried it in the early hours of the morning (didn't get to bed until 6 a.m. - there's geeky for you!) and 'broke' the site several times. Thank goodness for ocP's restore functionality which quickly put things back as they were!

Reason for trying this out was my impulsive act of downloading IE9 (beta) which I thought had addressed HTML5 and CSS3. Can't say I discovered that it did. The triple-image layered background still does not display in IE9. Perhaps I need to re-write the properties, but I assumed it was a matter for the browser, since the other browsers do it well enough.

One other feature of IE9 that might interest the staff is that my IOTD box suddenly began to display a vertical scrollbar - something it doesn't do in any other browser - not even IE8.

Needless to say, I no longer have IE9 installed …
Sorry to read about your problems to set this up Fletch.

The test site is still on line ocTest and you can check for yourself that it does work well with IE8.

Tip: In order not to have to change your master templates until you are satisfied that the method is working well for your site and have the freedom to try different solutions without breaking anything, do the following:

  1. Export your theme to your PC.
  2. Create a blank theme (call it anything you want)
  3. Extract the TAR file in your PC
  4. FTP the files to the new Theme folder on your site
  5. Create a test Zone using the new Theme
This should give you a mini site where you can explore the themeing alternatives without affecting the original.

Look at the HEADER.tpl carefully, it is the key to make this work.
I've used what was there already: 'main_website' and 'body_inner'
Inserted 'gradient' and 'topleft' between the two. Did not close these new 'div'.
Any other approach I've tried, failed.
Back to the top
 
Posted
Rating:
#62910
Avatar

Community saint

Will give it another try tomorrow as it is pretty late now (for me, that is).

I DID concentrate on the two additional divs and I DID insert them in the correct place.

Like your trials, I also tried closing them and they broke. I left them open and they didn't do a thing to my IE display.

BUT I'VE JUST REMEMBERED - I don't think I cleared the cache in IE. Comes from doing things when one is chinstrapped.

Will report back …

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#62919
Avatar

Community saint

:thumbs: EU-bloody-REEEEEEEKA!!! :thumbs:

Cracked it Jean.

You can view it here in IE and all the other browsers, with the background displaying the same!

Had to do a bit of fiddling around with the images, so what you say is the  #gradient  now has the glare image (the bubbles), the  #topleft  now has the 'tiled' image, and the  #main_website  is now carrying the 'gradient' image. Who cares?

Also retained your 'fixed' declaration for 'background-attachment' because, as you guessed, a long page runs out of background when scrolled.

It is rendering on all browsers, and that was the goal. Probably knocks W3C XHTML validation into a cocked hat, but I'll deal with that another time!

Thanks, buddy!

:thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#62920
Avatar

Community saint

Congratulations Fletch!:thumbs:

Indeed, it does look great in IE.
I'm glad it worked out finally.

Cheers!:)
Back to the top
 
Posted
Rating:
#64207
Avatar

Community saint

Update:

Jean said

I can see two minor problems:
1- If someone has a monitor with a height greater than 1024px - the tile will still show properly, but the gradient will stop short on the vertical.
2- If the body_inner is smaller than 1024px, the gradient will adjust to the same height. I believe that this is due to the fact that I did not find the way to properly close the two new div in Header.tpl.

#1 - You were absolutely right to be concerned about this one. Opera, in particular, refused to render all the way down the screen. Even after I increased the height dimension of the gradient.

#2 - Fixing this issue fixed the one above. I inserted two closing </div>'s into FOOTER.tpl, just above the closing </body> tag.

Even the W3C validator is happy about the solution in #2!

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#64210
Avatar

Community saint

Fletch said

Update:

Jean said

I can see two minor problems:
1- If someone has a monitor with a height greater than 1024px - the tile will still show properly, but the gradient will stop short on the vertical.
2- If the body_inner is smaller than 1024px, the gradient will adjust to the same height. I believe that this is due to the fact that I did not find the way to properly close the two new div in Header.tpl.

#1 - You were absolutely right to be concerned about this one. Opera, in particular, refused to render all the way down the screen. Even after I increased the height dimension of the gradient.

#2 - Fixing this issue fixed the one above. I inserted two closing </div>'s into FOOTER.tpl, just above the closing </body> tag.

Even the W3C validator is happy about the solution in #2!


Fletch, your mind never stop working!
Finding a resting place for those lost end.divs is of great importance and will make this solution to IE's lack of compliance to CSS3 structure a viable choice.
I'm glad you found it!
Thanks!
Jean
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: