Community Forums › Forums › Archived Forums › Design Tips and Tricks › Extend Sidebar Background Image to Footer Widgets
- This topic has 13 replies, 4 voices, and was last updated 9 years, 2 months ago by WisdmLabs.
-
AuthorPosts
-
May 8, 2013 at 10:37 pm #40031johnnychandlerMember
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.comMay 9, 2013 at 6:17 pm #40198johnnychandlerMemberAnyone have an easy solution ?
May 9, 2013 at 8:02 pm #40211devParticipant`
#inner {
background-image: url(images/truck-chrome.png);
}
`May 9, 2013 at 8:47 pm #40218johnnychandlerMemberYeah 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
May 9, 2013 at 8:55 pm #40220devParticipant`
.sidebar {
height: 2200px;
}
`Probably not the best way... but it should work.
May 9, 2013 at 10:35 pm #40233johnnychandlerMemberI tried that but on the pages with little content looked too tall.. It just didn't look well at all...
May 9, 2013 at 11:20 pm #40236devParticipant`
.home #sidebar {
height: 2200px;
}
`May 10, 2013 at 7:53 pm #40411johnnychandlerMemberThis 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
February 17, 2015 at 12:25 pm #141121scaramiaMemberHey 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!
February 17, 2015 at 12:58 pm #141124WisdmLabsMemberHi,
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*/ }
February 17, 2015 at 2:00 pm #141133scaramiaMemberThat 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!
February 18, 2015 at 11:26 pm #141274WisdmLabsMemberFor 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.
February 19, 2015 at 4:11 pm #141374scaramiaMemberYou are amazing. Thank you!!!!
February 20, 2015 at 11:16 am #141480WisdmLabsMember -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.