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

XF 1.2 Image on left and right side of board

Discussion in 'Styling and Customization Questions' started by WiseHollow, Oct 15, 2013.

  1. WiseHollow

    WiseHollow Member

    Is there a way to have a background image on the left and right side of the forum?
     
  2. EQnoble

    EQnoble Well-Known Member

    Sure, but you will have to specify what you want.

    Do you mean an 'an image on both sides' as two images one on each side or do you mean one image showing on both sides behind the forum? It makes a difference in how I would personally do it.
     
  3. WiseHollow

    WiseHollow Member

    One image on both sides seems best in my mind :)
     
  4. Russ

    Russ Well-Known Member

  5. WiseHollow

    WiseHollow Member

    Yeah that looks perfect! :eek: Know how I can get that? @Russ
     
    Last edited: Oct 16, 2013
  6. WiseHollow

    WiseHollow Member

  7. 51463

    51463 Well-Known Member

    I would also like this. Has anyone figured it out?
     
  8. Neso

    Neso Member

    I was searching for same solution and noticed this thread, after checking code, it is quite simple ... For anybody else that wish to have ads like this, just use this code in header of your site ...

    In code bellow I wrote where you need to put your links, after that copy code and adjust width and height and also margin-left in code to fit your site.

    Code:
    LEFT AD
    
    <div style="z-index:1;position:fixed;visibility:hidden;top:90px;left:0px;width:100%;height:768px;overflow:hidden;"><div style="position:absolute;visibility:visible;-webkit-transform:translateZ(0);margin-left:-866px;margin-right:0px;left:50%;"><div style="width:336px;height:768px;margin:auto;"><a href="YOUR LINK HERE" target="_blank" rel="nofollow"><img src="YOUR IMAGE LINK HERE" width="336" height="768" border="0"></a></div></div></div>
    
    RIGHT AD
    
    <div style="z-index:1;position:fixed;visibility:hidden;top:90px;right:0px;width:100%;height:768px;overflow:hidden;"><div style="position:absolute;visibility:visible;-webkit-transform:translateZ(0);margin-left:530px;margin-right:0px;left:50%;"><div style="width:336px;height:768px;margin:auto;"><a href="YOUR LINK HERE" target="_blank" rel="nofollow"><img src="YOUR IMAGE LINK HERE" width="336" height="768" border="0"></a></div></div></div>
     
    Bram likes this.
  9. 51463

    51463 Well-Known Member

    Do you mean in the Appearance-Styles-Style-Header ?


    after the
    </div>
    </xen:hook>?

    I put it there but nothing appears
     
  10. Kevin

    Kevin Well-Known Member

    Depending upon what exactly you're trying to do, the code below might be what you're after. This method uses CSS only, no div sections, and will allow you to put as many background images as you want on the page. The caveat is that only new browsers support it so if you have a bunch of visitors with old browsers then you'll need to take a different approach.

    For reference, visit http://awalkerbit.me and scroll down to the bottom. As you scroll down the dark splotches on the background is one background image. On the bottom left the zombie is a second background image while the zombie grouping on the bottom right is another background image

    Placed in EXTRA.css:
    Code:
    body {
        background: 
            url("/images/Grunge-03.png"),
            url("/images/hannah.png"),
            url("/images/zombie.png");
            background-repeat: repeat, no-repeat, no-repeat;
            background-position: left top, bottom left, bottom right;
            background-size: 300px 112px, 300px 153px, 450px 180px;
    }
    
    Just keep adding url entries for each image you want to appear on the background and then update each of the properties accordingly with a comma between each image property values.
    Code:
    body {
        background: 
            url("/images/{IMAGE1}"),
            url("/images/{IMAGE2}"),
            url("/images/{IMAGE3}");
            background-repeat: {IMAGE1 value}, {IMAGE2 value}, {IMAGE3 value};
            background-position: {IMAGE1 value}, {IMAGE2 value}, {IMAGE3 value};
            background-size: {IMAGE1 value}, {IMAGE2 value}, {IMAGE3 value};
    }
    
     
  11. Neso

    Neso Member

    I added this to PAGE_CONTAINER but you can add this on any page, module etc.

    You need to add your image link in code and URLs, you will see in code, I wrote where you need to add image link:

    YOUR IMAGE LINK HERE

    and link

    YOUR LINK HERE
     

Share This Page