Extend Sidebar Background Image to Footer Widgets

[johnnychandler]

Hello I am wanting to extend the sidebar background to fill the space to the footer  widget section and can't figure out a solution.

Right now I using this css

.sidebar {
background-color: #f7f8f9; background: url(images/truck-chrome.png)  repeat;
display: inline;
float: right;
font-size: 14px;
padding: 0 0 30px;
width: 340px;
}

 

It will only fill to the end of my sidebar content.

 

Any ideas that might work...

I would like to still use the same small image and just keep repeating it down the sidebar.

Any easy solutions?

 

Thanks Johnny

http://www.truckingtools.com

[johnnychandler]

Anyone have an easy solution ?

[dev]

`
#inner {
background-image: url(images/truck-chrome.png);
}
`

[johnnychandler]

Yeah I tried that but it  it puts in on the whole page.. the image is very small.. and I just  repeat it...  I just want it in the sidebar.....

 

I know I can make an image in the inner and repeat and it .. but I would have to use a larger image.. I am trying to use the small image  to keep my load time faster...

 

Thanks Johnny

[dev]

`
.sidebar {
height: 2200px;
}
`

Probably not the best way... but it should work.

[johnnychandler]

I tried that but on the pages  with little content looked too tall..  It just didn't look well at all...

[dev]

`
.home #sidebar {
height: 2200px;
}
`

[johnnychandler]

This worked for my homepage but it still doesn't address the issue with any of the other pages.. Since they are different heights...

Any other ideas?

 

Thanks Johnny

[scaramia]

Hey Johnny,

Did you ever get an answer to this? I found this solution elsewhere in the Forum,

.sidebar {padding-bottom 9500px; margin-bottom: -9500px; overflow: hidden;}

but it extends the background below the footer: http://factsandlogic.org/new/speakout/

I can make it work on a page-by-page basis: http://factsandlogic.org/new/pr-for-israel/

Any other ideas how to do this?

Thanks!

[WisdmLabs]

Hi,
Referring http://www.truckingtools.com existing code, just add the following CSS in style.css

/*Line No. 641*/
#content-sidebar-wrap {
     float: left;
     width: 100%;
     position: relative; /*Added*/
}

/*Line No. 1187*/
.sidebar {
     background-color: #f7f8f9;
     background: url(images/truck-chrome.png) repeat;
     display: inline;
     float: right;
     font-size: 14px;
     padding: 20px 0 30px;
     width: 340px;
     position: absolute; /*Added*/
     height: 100%; /*Added*/
}

---

http://wisdmlabs.com/

[scaramia]

That works beautifully for truckingtools.com!

But I can't quite see where to put those styles in these sites:

In Avada. http://factsandlogic.org/new/archive.

or Genesis / Lifestyle Pro: http://theberkeleyperformingarts.org/about/

Thanks for any help WisdmLabs!

[WisdmLabs]

For Avada http://factsandlogic.org/new/archive, add the following CSS:

div#sidebar {
     position: absolute;
     height: 100%;
     right: 0;
}
.avada-row {
     position: relative;
}

For Lifestyle Pro - http://theberkeleyperformingarts.org/about/, add the following CSS:

.content-sidebar-wrap {
     position: relative;
}
.content-sidebar-wrap:before {
     content: '';
     display: table;
}
.content-sidebar-wrap:after {
     content: '';
     display: table;
     clear: both;
}
.sidebar {
     background-image: url('http://theberkeleyperformingarts.org/wp-content/uploads/sidebar_bg.gif');
     position: absolute;
     height: 100%;
     right: 0;
}

And remove the background-image from individual widgets.

---

http://wisdmlabs.com/

[scaramia]

You are amazing. Thank you!!!!

[WisdmLabs]

Welcome!!!

---

http://wisdmlabs.com/

[Author]

Posts