How to create a background that spans multiple regions within a zone?

I'm having the same problem. Have you figured out a solution?

You should be able to achieve this using the #zone-preface-wrapper div.

Depending on how you have configured your Omega subtheme, this may stretch across the entire browser width. If you want it for a specified width inside of this, you should be able to achieve it with #zone-preface div

The thing is if I set the width of the #zone-preface div (in my case it's #zone-content), it'll break the layout because the widths and paddings of the inner regions are already specified. I don't think this is something very difficult to achieve but somehow I'm stuck...

Having the specific example to look at (i.e. a sandbox of your site) would make it easier to see what you are doing. Even an mock-up would help. For example,

• do you want the background to span the entire width of the browser window, or a set width (you refer to zone-content. There is also zone-content-wrapper)?
• for the prefix and suffix you refer to, are these in the same zone as the left and right regions?

How you have described it is a little confusing...

Sorry for hijacking this thread, but since my problem is similar to the thread owner, I'll just post an example of what I want to achieve for my website.

Basically there are 2 regions in the Content zone: Content and Sidebar Second. The Content region has a prefix of 1 column and the Sidebar Second region has a suffix of 1 column. Now I want to make a background that spans both of the regions but excluding the prefix and suffix, i.e. from column 2 to column 11. The HTML structure looks like this:

<div id="zone-content-wrapper">  
  <div id="zone-content">    
    <div id="region-content">...</div>
    <aside id="region-sidebar-second">...</aside>  
  </div>  
</div>

The "zone-content" div spans the entire window, so I cannot set a background on that one. How can I create a wrapper div that covers only the visible area of the Content and Sidebar Second regions?

I have the same problem as #5

Warm regards!

Sorry to bump this thread.

Has anybody found a solution to this. I also have a similar problem as #5.

Best regards!

As far as I know, there isn't a clean way to do this with Omega. However, a few potential approaches to hack around it come to mind:

1. Set the background on the main content area, and the right sidebar, override the margin between the two so the background "touches" and then add the margin back in (using padding?) using the region-inner elements. This likely won't work if you have a tiling background or a full image as it will restart on the right sidebar which will look odd.
2. Instead of a prefix and suffix, add regions to the left and right and force them to render even if empty. Then set the background across the whole zone and override for the new prefix and suffix regions.
3. Same as the last one, but skip having the prefix region and instead set the background-position-x to the prefix width (would need to set on each layout stylesheet accordingly.

Again, none are ideal, but maybe one will do the trick for you.

Actually, thinking about this a bit further, perhaps the best option would be to override omega/omega/templates/zone--content.tpl.php and add a div wrapper around print $content;...

Thank you, Joshua!

That's what a love about Drupal: It's great community and all the possibilities that the code offers.

You gave me four great options, but I found a different approach for my issue.

Since my background image has to tile, and I need different screen sizes, I made a copy to fit the 8 grids of each screen size.

Then I put the correct image inside the right zone, and with a bit of CSS magic I centered --background-position: center;

Works for me!

Warm regards from sunny México!
: )
José

Minor edit to try to make the question clearer