Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #24218

    Hi,

    I am facing a big issue.

    My background image ( A stadium) is cut by the footer.

    After the footer there is only a blue color.

    How can I fix it and see my full background image ?

    http://www.fansfoot.com

    Screenshot : http://tinypic.com/r/e6r2ol/5

    Thanks

    #122771

    Hi Fansfoot,

    Normally, page content must fill the space and create the height. You would need to set the pages main container to a minimum height in order for that to work.

    What you may be looking for is called a Sticky Footer which the theme doesn’t offer currently. Which is where the footer stick to the bottom of the browser window and the content container expands to fill the window as well.

    Regards,

    Devin

    #122772

    What do I need to add in “Quick CSS” box in admin panel to fit your solution ?

    For themoment, this what I have on my “Quick CSS”box :

    bode{min-height:1200px;}

    .social_container .social_bookmarks .rss {display: none !important;}

    .social_container, #top .social_bookmarks , .top_blue_banner .container{border:none !important;}

    .primary-background , .seperator-addon , .seperator-bottom {display:none;}

    .social_new_add { float: right; margin-top: 1px; width: 610px;}

    .fb-like{ float: left;position: relative; margin-left: 15px;}

    #___plusone_0{float: right !important; position: relative;width: 80px !important;}

    .fleft{float:left;margin-top: 3px;}

    .fb_iframe_widget span, .fb_iframe_widget iframe{height:62px !important;}

    .fb_iframe_widget{z-index:999;}

    #header .container{padding: 25px 0 5px !important;}

    #footer .container {

    padding: 0 !important;

    }

    #footer

    {

    background:#0E2A54;color:#fff;

    }

    #header .top_blue_banner{background:#0e2a54;position: relative;width: 930px;margin: 0 auto;padding: 0;margin-top: -1px;}

    .ajax_form {width: 900px;}

    #top .portfolio-title, .portfolio-sort-container .inner-entry, .ajax_loading, .ajax-control a, .inner_column, .ajax_slide .inner_slide, #top .ajax_slide .slideshow, #top .inner-entry .slideshow, .ajax_slide .entry-content{background-color:#DBDBDB;}

    .textwidget a{color:#fff;text-decoration:none;}

    .textwidget a:hover{text-decoration:underline;}

    #122773

    If you fix this spelling error to correctly read body instead of bode it should do the trick:

    bode{min-height:1200px;}

    Just keep in mind you’ll be forcing a scrollbar on any screen that isn’t 1200px tall.

    Regards,

    Devin

    #122774

    Hmmm I got it…

    So how to auto set the height depending on screen height ?

    #122775

    Google “Sticky Footer” for some tutorials on the various ways you can do that. Usually it involves adding a new container or two to all of your content and then a negative margin for the footer.

    As I said before though, the theme doesn’t have support for that as is so it would need to be added in as a customization which is beyond what we can assist with via support.

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Big issue with background image and footer’ is closed to new replies.