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

Image in footer?

Discussion in 'XenForo Questions and Support' started by steven s, Dec 26, 2010.

  1. steven s

    steven s Well-Known Member

    I want an image to begin all the way to the left of the screen and repeat to the right side.
    screen.png
    I've played around with .footerLegal .pageContent, that doesn't seem to do anything.
    I'm guessing I need background-image:url('myimage.png'); background-repeat:repeat-x; but can't figure where to place it.
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    It works for me:

    Admin CP -> Appearance -> Templates -> footer.css

    Change this:

    Code:
    .footerLegal .pageContent
    {
    	font-size: 11px;
    	overflow: hidden; zoom: 1;
    	padding: 5px 0 15px;
    	text-align: center;
    }
    
    ...to this:

    Code:
    .footerLegal .pageContent
    {
    	background-image: url('PATH/TO/IMAGE.GIF');
    	background-repeat: repeat-x;
    	font-size: 11px;
    	overflow: hidden; zoom: 1;
    	padding: 5px 0 15px;
    	text-align: center;
    }
    
    ...which results in this (I used the Admin CP title image):

    Screen shot 2010-12-26 at 2.43.07 PM.png
     
  3. steven s

    steven s Well-Known Member

    See how it's aligned directly below Forum?
    But I want it to start all the way to the left and continue all the way to the right for as large as the window is.
     
  4. steven s

    steven s Well-Known Member

    SOLVED:
    Instead of
    Code:
    .footerLegal .pageContent
    I changed it to

    Code:
    .footerLegal
    {
    background-image:url('myimage.jpg');
    background-repeat:repeat-x;
    }
    
    .pageContent
    {
        font-size: 11px;
        overflow: hidden; zoom: 1;
        padding: 5px 0 15px;
        text-align: center;
    }
    I thought that did it. It threw off my upper breadcrumb. My categories became centered.:(

    So I changed it to
    Code:
    .footerLegal
    {
    background-image:url('myimage.jpg');
    background-repeat:repeat-x;
    }
    
    .footerLegal .pageContent
    {
        font-size: 11px;
        overflow: hidden; zoom: 1;
        padding: 5px 0 15px;
        text-align: center;
    }
    And it works.
    But it it wrong to use .footerLegal AND .footerLegal .pageContent?
     

Share This Page