Possible to add background images to left and right column of MJT layout?

HTML & CSS
1

Is it possible to add background images to the left and right column in the following Matthew James Taylor layout and still have it function in IE6? I’m getting really frustrated. :frowning:

I know I have a few different questions posted at the moment, but this should be the last. If someone can help me figure this out I would greatly appreciate it.

2

I would like the header and footer to be 100% width, but the inside contents 980px. I would like the background image to be 980px and create faux columns.

I found some other layouts at http://blog.html.it/layoutgala/ that I was able to get to work correctly with faux columns, so I may just use one of them. I wanted to use the Matthew James Taylor layout because I assumed it was the best option available, but the ones at the link I just mentioned seem to work just as well. Is there any reason not to use them?

3

I just saw what you mean. I never used this method and the site describes nothing about using background images? I’m going to play a bit arround with it, lets see if I can maybe find a sollution.

4

If you are using a background image for a faux column effect in a fixed width layout then you don’t need any of those negative margin or nested wrapper techniques.

Unless I’m misunderstanding what you want I’m not sure why you need to complicate things if you are going to use an image anyway. All those negative margin techniques (which are loosely based on my original technique (which was largely based on Doug Livingstone’s original idea posted in these forums about 7 years ago)) are methods for creating equal column colours without using images. If you are going to use an image anyway then use a simpler layout.

Just float the three columns with appropriated width contained in a 980px wrapper which will hold your faux column image. Something like this very very old example.

5

Nothing lines up the way it should. Everything is shifted to the right.

6

Just a few quick questions

  • Do you want to use entire background images or some sort of patern?
  • Does the site needs to be width: 100%?
  • Does the site needs to be 100% height with sticky footer?
7

Yeah, the site doesn’t describe a method for using faux columns w/ this layout, but I don’t want to use only a simple color for the background of each column.

Thank you for giving this a try. I appreciate it.

8

I see! What happens when testing in IE6?

9

I tried that, of course, but it does not work in IE6. I’m assuming it needs some faux columns, but I can’t seem to get them working w/ this layout.

10

Did you try to change the background property for colmask & colright i.e.


#colmask {

	background: url(your background image) repeat-y;	
}
#colright {

	background: url(your background image) repeat-y;
}
11

One last bump I suppose.

Thank you.

12

bump