Omega Subtheme Footer Background Issue

Posted by dillony on January 16, 2013 at 3:03am

I'm designing an Omega subtheme with the responsive settings off so that it has a fixed with. I've got a simple "Footer Second Block" that looks like:

  <div width="940" style="background-image: url(footer-bg.jpg); background-repeat:no-repeat; height: 324px; position:relative; top:0px; left:0px;">
    <p style="margin: 0px; padding: 0px; border: 0px;"> </p>
  </div>
  <div class="clear"></div>

I'm wanting to create a solid background the same height, yet 100% of the screen width behind it. Is this possible?

Comments

I don't know if this will

Posted by prothero on January 17, 2013 at 8:19pm

I don't know if this will help, but I've had some luck displaying blocks using:
left: -xxxpx;
width: 100%;

The moves the left side of the block and expands it to the edge of the region/zone it's in. Experiment and it might work.

EarthEdNet

Thanks! It didn't exactly

Posted by dillony on January 20, 2013 at 2:58am

Thanks! It didn't exactly work, but it did give me an idea for a fix. Here's what I used:

<div style="background-color: #FF0000; height: 324px; position:relative; top:0px; left: -600px;">
<div style="background-color: #FF0000; height: 324px; position:relative; top:0px; left: 1200px;">
  <div width="940" style="background-image: url(Footer-Bg.jpg); background-repeat:no-repeat; height: 324px; position:relative; top:0px; left: -600px;">
    <p style="margin: 0px; padding: 0px; border: 0px;"> </p>
  </div>
</div>
</div>
  <div class="clear"></div>

Definitely not the cleanest code, but it works. I used background-color just for testing purposes, and will change those to a background image that I want to repeat horizontally.

Thanks again.

I think you can accomplish

Posted by drewbolles on January 22, 2013 at 12:57am

I think you can accomplish what you want with one wrapper div.

.zone-footer-wrapper {
background: url(horizontal-repeating-image.jpg) repeat-x;
}
.zone-footer {
width: 940px;
margin: 0 auto;
background: url(my-static-background.jpg);
height: 400px;
}

<div class="zone-footer-wrapper">
<div class="zone-footer">
Footer Content
</div>
</div>

I have a 100% width .zone-footer-wrapper with a repeating bg and .zone-footer centered with its own BG. I believe your omega subtheme should be laid out like that.

------------
Custom Drupal development and theming. http://www.drewbolles.com