I'm trying to make a site where the "body" background image (or just simply the background color) is different depending on whether it's behind the header area, the layout container, or the footer. The best way to explain what I am trying to do is take a look at this site (not an Atahualpa site).

http://www.medicalteams.org/

I'm trying to replicate this design for a client. Notice that it is a fixed width site, yet the tiled background images differ depending on their vertical location on the page. Note that the site is not using a super-tall 1-pixel wide image that repeats across the x axis. If they did it that way they would not be able to have page lengths that differed throughout the site. Instead, they seem to be assigning different background images to different sections of the body. Can I do this in Atahualpa?

Just to make sure I am clear here, I am not talking about putting background images within the header area, the layout container, or the footer. I'm talking about putting different background images in the body area behind the header area, layout container, and footer.

Thanks, Emanuel

Here's another way to state what I am trying to do...

1. I have have a fixed-width for my layout container.
2. I want to put a background image behind the header area that extends the entire width of the browser window.
3. I want a different background image behind the middle portion of the site, and again another different one behind the footer. I want these background images also to extend the entire width of the browser window.

Because of the structure of how the page is generated, you can not have that effect on a fixed width page. You can have a image (or an image that is a color) and a background color for the body and you could have the image at the top, middle or bottom of the page. But this only takes care of two of your three requirements (you could have the image across the entire top, then have a background color for the rest of the page but then your footer would only be the width of the fixed size of the layout.

Juggledad,

So you are actually saying this is a limitation in Atahualpa? If true, this would be the first issue in Atahuapla I have come across without a fix. Help me brainstorm a minute here... let's see if there's a work-around.

One possible work-around I am thinking to set the width to 100% fluid, and then assign the following css to the"Layout Style Container":

width:1020px;
margin:0px auto;

The problem is Ata does not allow margins to be set in the Layout Style container. How come? Is there a work-around here?

Though this might not be a solution anyway if the layout container is the main div inside the body and if the header, page area and footer divs all lie within the layout container div. What would be needed is are three same-level divs (header, page area and footer) directly inside the body, spanning the full width of the browser window, where I would assign the background images. Then separate divs in each of these three areas for the foreground content.

This might be too much of a change to be practical (if I am even thinking correctly here).

Emanuel

PS - Short of a total solution, I hear you suggesting that I could at least have a unique background image (or color) spanning the full browser window for the header area. But I am not sure I understand how you are suggesting I do that.

Forget the PS. I understand how to do that.

If you think of laying things on top of each other here is how it looks.
First you have the page body
on top of that is a 'wrapper' div
on top of that is a 'container' div
on top of that is the 'layout' TABLE which has three rows
- the header
- the bodyrow (has left sidebar(s), center, and right sidebar(s))
- the footer
end 'layout' TABLE
end 'container' div
end 'wrapper' div
end of page
so the footer can only extend as wide as the 'layout' table is

Thanks for that container hierarchy jd,

Tell me, what does the wrapper div do? And is there a way I can add a div below the wrapper? Meaning on the same level as the wrapper (not on top of it or within it). That way it will appear below the footer and can extend the full width of the browser window? If I could do that I could solve my problem. I would just use this div rather than the standard footer.

Here is the new site I am developing. As you can see I got the design to work in the header area by using a multi-colored vertical stripe with an x-repeat as the background image, matching the colors with the logo area, header bar and header image. But my client really wants a similar effect on the bottom of the page.

http://myasha.org/tempasha/

Emanuel

One more try here... Is there a way to add another div container below the layout container that I can style so as to include a background image/color that extends the entire width of the browser window and serves as an alternative "footer"? This div would likely need to be on the same level as the wrapper div, I would imagine.

Thanks if anybody can answer this.

Emanuel

sure you can modify the code, just remember to take good notes so you can make the changes the next time there is an upgrade.
you will need to edit header.php and footer.php to put our new <div> and </div> in.

Hey JD,

Check this out. I think I may have figured out a way to do this without having to add a new div. Basically, it looks like you can have two background images... one in the <body> tag (as Atahualpa lets you do) and one in the <html> tag. Look at this web page:

http://techknack.net/css-trick-two-background-images/

So I can anchor the second background image (in the html tag) to the bottom of the page and use the sticky footer option. I am going to poke around and see if I can do this. The big question is where/what php file would I edit to put a background image into the <html> tag? Would that be an Ata file? Or a WP file?

You can add it with CSS, through ATO -> HTML/CSS Inserts -> CSS Inserts

html { background: url('/.../.../someimage.gif') no-repeat top left; }

OMG this worked and it is so simple!! Thanks!

Basically, I have one background image in the body set to repeat-x and positioned at the top. Then I went and put the following code into the HTML/CSS inserts:

html{background:#EEF2FB;background-image:url('http://www.myasha.org/images2/bg-bottom.jpg');background-repeat:repeat-x;background-position:left bottom;}

This adds another background image to the html tag and positions it at the bottom. Note that I had to put the background color in the html tag and remove it from the body tag.

Go check out the effect here:

http://myasha.org/tempasha/

Thanks again Ata for your awesome theme. (Now I need to pretty up that site. Those background images and colors, etc., are just placeholders. Not the ones I intended to use in the end.)

Freakin' awesome solution. I never would have figured out the part about removing the bg color from the body style and placing it in the insert. Thanks so much for posting this.

Problems with IE 8 - will not read the CSS inserts (WP 3.01, ATA 3.53)

site = www.media-organic.com

CSS insert =
/*adds full width image across bottom of screen*/
html {background: #999999 url('<?php bloginfo('template_directory'); ?>/images/background9.gif')repeat-x bottom left;}

this insert needs the background color stated here (rather than in the ATO Body section) in order for the bottom bg image to display. Works perfectly in FF, Safari, Chrome but won't play nicely with IE8.

IE8 will not display bg color unless it's stated in ATO body style; will not display lower bg image at all.

Any thoughts, workarounds?