XF 1.2 Image on left and right side of board

[WiseHollow]

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

 

[EQnoble]

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.

 

[WiseHollow]

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.

One image on both sides seems best in my mind

 

[Russ]

Like so?

http://8wayrun.com/

(with ad blocker off)

 

[WiseHollow]

Like so?

http://8wayrun.com/

(with ad blocker off)

Yeah that looks perfect! Know how I can get that? @Russ

 

[WiseHollow]

Bump

 

[51463]

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

 

[Neso]

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.

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>

 

[51463]

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


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

I put it there but nothing appears

 

[Kevin]

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

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:

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.

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};
}

 

[Neso]

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


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

I put it there but nothing appears

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