several background images?

[LemonInflux]

I was just wondering if I could have 3 background images. One to be positioned left no repeat, one repeat-x, one positioned right no repeat.

 

Is there a way to do this? Preferably in td tags, but div is also ok.

 

Thanks in advance,

 

Tom.

[PokeTech]

I'm not sure if you can do this with background images but you can do something like this:

 

<style type="text/css">

#top_left {

width: 100%;

height: Heightpx;

background-image: url(Image);

background-position: center;

background-repeat: no-repeat;

overflow: hidden;

}

#top_right {

width: 100%;

height: Heightpx;

background-image: url(Image);

background-position: center;

background-repeat: no-repeat;

overflow: hidden;

}

#top_main {

width: 100%;

height: Heightpx;

background-image: url(Image);

background-position: center;

background-repeat: no-repeat;

overflow: hidden;

}

</style>

 

 

<div valign="top left" id="top_left">

<div valign="top right" id="top_right">

<div valign="top" id="top_main">

</div></div></div>

 

See if that works.

[LemonInflux]

Yeah, that was my original idea. I was hoping there was an easier and tidier way.

[dbrimlow]

That will not work. Without either floating or absolute positioning the ID, they will just stack, one atop the other. within a table cell or select (div) container.

 

You need to explain what you want this for, to help you can construct the proper css.

[TheFilmGod]

The css example given earlier is horrible! You can put all background properties in one "Background: declaration"

[GameYin]

Instead of criticizing the people for giving an attempt at finding the correct code, try to help him with your own example. Also, back to the topic, IF you are going to use that code, use position:fixed also so the pictures will stay in place.

[dbrimlow]

Without knowing the context of how LemonInflux wants to use the images it is fruitless to speculate on techniques and/or offer tips or solutions.

 

CSS positioning is a fickle thing - all selects and tags in the markup impact upon the other; without seeing the context in which a given question here is used recommending a solution is futile.

 

LemonInflux, can you provide an example of screenshot of what you are trying to achieve? There are some cool techniques to simulate multiple background images.

 

IF you are going to use that code, use position:fixed also so the pictures will stay in place.

 

Position:fixed is not cross-browser compatible; it doesn't work in IE. And while Stu Nicholls created a brilliant hack to get it to work in IE6 (stu nicholls position fixed, it precludes the use of "position:relative or absolute" in the document.