1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Quick background question

Discussion in 'Styling and Customization Questions' started by Senior Derp, Jun 21, 2015.

  1. Senior Derp

    Senior Derp Member

    Hello,

    I recently put a background on my website by adding this code to my EXTRA.CSS

    Code:
    #headerMover
    {
        background-image: url("images/bg.png") !important;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    #headerMover #headerProxy, #header, #content
    {
        background-color: transparent !important;
    }
    
    Now everything is great, except it doesn't fill the whole page, and leaves this bar across the bottom, now on the main index, it's not a problem, but on pages that, for lack of a better term, aren't as long, it becomes an issue. In this picture it's difficult to see but

    [​IMG]

    You can kind of see where the black background (which is the image below) ends and where the bar at the bottom of the page begins.

    [​IMG]


    Like I said before, not a huge issue on the main index, but on "shorter" pages, it becomes a real issue. I am assuming this is a style properties setting somewhere within my theme, I'm wondering if anyone has any suggestions on where I should begin looking, and what I should do to allow the background image to fill the entire page.

    [​IMG]

    When I say large dark gray bark, I am not talking about the one that includes the "Contact us" "Help" and "Home"



    Thank you :D

    To give a little better idea on the bar I am talking about I changed the color for a moment. This same bar is at the top of the page too, I'd like to completely remove them and have the background take their place.

    [​IMG]
     
    Last edited: Jun 21, 2015
  2. Senior Derp

    Senior Derp Member

    Bump? I apologize for the wrong section, thank you for whomever moved it.
     
  3. Amaury

    Amaury Well-Known Member

    You've got your background set to not repeat. Try changing it so it repeats.
     
  4. Senior Derp

    Senior Derp Member

    Thank you for responding, however this did not fix the issue, since posting this thread I have figured out how to fix the TOP part of the website, but the issue at the bottom still persists.

    Code:
    #headerMover
    {
        background-image: url("images/bg.png") !important;
        background-size: 100% 100%;
        background-repeat: repeat;
    }
    
     
  5. Amaury

    Amaury Well-Known Member

    Try adding an !important declaration.
     
  6. Senior Derp

    Senior Derp Member

    - Edit

    So I just fixed it for the main index, now it's an issue only on pages created through nodes. Any idea which style property setting would target pages? Again, thank you so much for your time, and the main forum index was me just completely missing something obvious, but I'm not so sure about the pages created through nodes.
     
    Last edited: Jun 24, 2015

Share This Page