Extend Sidebar Background Image to Footer Widgets

Community Forums Forums Design Tips and Tricks Extend Sidebar Background Image to Footer Widgets

This topic is: not resolved

This topic contains 13 replies, has 4 voices, and was last updated by  WisdmLabs 4 months, 2 weeks ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #40031

    johnnychandler
    Participant

    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
    #40198

    johnnychandler
    Participant

    Anyone have an easy solution ?

    #40211

    dev
    Participant

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

    #40218

    johnnychandler
    Participant

    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

    #40220

    dev
    Participant

    `
    .sidebar {
    height: 2200px;
    }
    `

    Probably not the best way… but it should work.

    #40233

    johnnychandler
    Participant

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

    #40236

    dev
    Participant

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

    #40411

    johnnychandler
    Participant

    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

    #141121

    scaramia
    Participant

    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!

    #141124

    WisdmLabs
    Participant

    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*/
    }

    #141133

    scaramia
    Participant

    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!

    #141274

    WisdmLabs
    Participant

    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.


    #141374

    scaramia
    Participant

    You are amazing. Thank you!!!!

    #141480

    WisdmLabs
    Participant
Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.