ZEN: How can I add two different background pictures outside each of the sidebars?

Posted by matsbla on December 5, 2012 at 11:39pm

I have two different background pictures that I want to add as outside each of the sidebars: one outside the left sidebar and one outside the right sidebar, so they will be as two vertically stripes outside them (and no picture over the header or under the footer).

If anyone can help it would be highly appreciated!

Comments

You can add the background

Posted by rosborn on December 6, 2012 at 9:28pm

You can add the background picture using CSS to the main sidebar div, which has class .region-sidebar-first on the left side. Just add enough padding to see it. Then put a background color in the div containing the sidebar content to cover it up, e.g.,

.region-sidebar-first div {
   padding-left: 20px;
   background-image: url('...');
   background-position: left;
}

.region-sidebar-first .section div {
  background-color: #fff
}

Then do the same for the second sidebar but position it to the right.

Thanks for the effort! The

Posted by matsbla on December 7, 2012 at 10:19pm

Thanks for the effort!

The problem is that this changes the background color inside the sidebar. I don't want to do anything with the sidebar, but all the blank area to the left of the 1. sidebar and right to the 2. sidebar.

I just added a white

Posted by rosborn on December 9, 2012 at 1:59am

I just added a white background to the sidebar in case the background image is too wide, but it's optional - although you'll need to add a no-repeat option.

Thanks, i get your point.

Posted by matsbla on December 12, 2012 at 8:19pm

Thanks, i get your point. I've also managed to fill the sidebar and the main area using this code:

#main {
background: none repeat scroll 0 0 #ffffff;
margin-bottom: -9999px;
padding-bottom: 9999px;
}
.region-sidebar-first {
background: none repeat scroll 0 0 #ffffff;
margin-bottom: -9999px;
padding-bottom: 9999px;
}

But I still don't know how to add two different background pictures to the website....

Like this: background picture

Posted by matsbla on December 8, 2012 at 12:08am

Like this: background picture 1 fill everything to the left of sidebar 1, from top to bottom. Same for background picture 2 for the right side. The page has 3 columns, and over them there should not be any pictures (just a blank area)

_________________________________________________________________
              |                                                  |   
              |      (Blank area (no picture)                    |     
              |__________________________________________________|  
              |               |                  |               |        
              |               |                  |               |        
BG-PIC 1      |---Sidebare1---|---Main-content---|---Sidebare2---|     BG-PIC 2
              |               |                  |               |   
              |               |                  |               |   
              |               |                  |               |   
              |               |                  |               |   
              |               |                  |               |   
______________|_______________|__________________|_______________|_______