Center Header with fixed width but has infinite background colored strip

[oceantrain]

I have elements in a header that are perfectly centered on my page. But it needs to have a background gradient color strip that extends forever. My problem is when I wrap the strip around the header, it get confined by the fixed width of the header elements. I need it to lay behind the header elements which are fixed width @ 960px. But the strip needs to extend forever.

[oceantrain]

This is my code:

Call toll free:
1-800-780-8476










 


@Layout.Title

CSS:

#header {

height:175px;

background:-moz-linear-gradient(top , #0f5979, #000);

background: -webkit-gradient(linear, left top, left bottom, from(#006699), to(#003366));

}

    .headerbackgroundbox

{

position:relative;

height:211px;

width:470px;

margin:0;

background:-moz-linear-gradient(top , #99cc33, #81A000);

background:-webkit-gradient(linear, left top, left bottom, from(#99cc33), to(#81A000));

-moz-box-shadow: 1px 1px 1px #757575;

-webkit-box-shadow: 1px 1px 1px #757575;

box-shadow: 1px 1px 1px #757575;



}

.container_12,

{

margin-left: auto;

margin-right: auto;

width: 960px;

}

[Paulie_D]

You’ll need to add another wrapper div outside of the container and apply the gradient background to that.

[oceantrain]

Worked great. Thank you. Don’t know how I messed that. :)

[Author]

Posts