Jump to content
leinteractive

Display Banner As Background Image?

Recommended Posts

How can I grab the image for the banner but set it as the background image of an element instead of embedding the image on the page?

 

What I'm looking at doing is a full page takeover banner where the advertiser gets to brand the background image of the site with their artwork - but in order to avoid any horizontal scrollbars, I need to have the banner be a background image instead of an inline img tag.

 

Share this post


Link to post
Share on other sites

Yes you can . But you need to customize some section in www/delivery/ajs.php file  . If you have some developing knowledge then you ca do that one .

 

Would this change the output for every banner then?

 

What if I just run my banner as an HTML banner and use CSS on my website to apply the background image - will the OpenX/Revive automatically convert the URL to track clicks?

 

For example, if my HTML banner is simply this:

 

<a href="www.clientwebsite.com" class="background-replace"></a>

Share this post


Link to post
Share on other sites

Yes reading this I immediately, thought just generate a standard HTML image and href tag and set the background of an element with the image url and wrap with the href tag.

That would work.(although I havent tested it)

Share this post


Link to post
Share on other sites

So what would I put in as the HTML for the banner then? Just the DIV tag with the background image applied or do I include the anchor tag with the href set?

 

I see there is a separate field for "Destination URL" - I'm just not sure how the two boxes are related or which one I should be the URL to be tracked into.

Share this post


Link to post
Share on other sites

The basic html invocation tag you pull out would look something like this:

 

<a href="revive adserver tracking link - campaign id">

<img src="revive adserver tracking link to uploaded image />

</a>

 

To display a background image and track you can do 1 of 2 ways:

 

1) you just need to take the src url of the image and apply this to the background. When the image loads it will display the image

2) load your background image however you like, just make sure that you load the above image tag at the same time (as a 1x1 image) to track impressions

 

To track clicks, you simply need to wrap whatever element the background image is loading inside with the link to make it clickable.

Share this post


Link to post
Share on other sites

 I would advise that you review how to setup campaigns and publisher zones so that you are familiar with the platform, but in summary, you just need to set this up as any normal advertising campaign and pull out standard html invocation tracking / publisher zone tracking as specified above. 

Share this post


Link to post
Share on other sites

I would really like to see this as a feature so I became a member to Revive Adserver Forum. We have a Wordpress site and Xenforo forum, selling our own advertisement places to firms and agencies. Our current pageksin / background image ad system is not acceptable in professional sense because it's simply putting an image and url to Wordpress. We are using Revive for banners but this feature, a way to insert two urls or one code and tracking it with Revive would be wondrous.

Share this post


Link to post
Share on other sites

Hi,

If I understand correctly

wouldn't it be easy to upload a banner, get its url.
Create another HTML banner, and create the html and use magic macros for the link with click tracking.

Something like this:

<div style="background:url(the banner url) no-repeat center center fixed">
 <a href="{clickurl}">The clickurl link</a>
</div>

Here is a list of available magic macros.
http://blackriver.to/2014/01/openx-source-revive-adserver-magic-macros/

Or just create a HTML banner and do it in javascript

Share this post


Link to post
Share on other sites

This works for me:

<div style="position: fixed; top:0px; left:0px; z-index: -1; background: url(http://adserver.url/www/delivery/avw.php?zoneid=ZONEID&amp;cb=RANDOM_NUMBER&amp;n=NID) center center no-repeat; width: 100%; height:100%;">
  <a href='http://adserver.url/www/delivery/ck.php?n=NID&amp;cb=RANDOM_NUMBER' target='_blank' style="display: block; width: 100%; height: 100%;"></a>
</div>

You create new zone with custom size: * x *, so you can upload your background banner. Link banners to this zone. Check zone id in code up. You can have multiple banners displayed as background image.

Share this post


Link to post
Share on other sites

This works for me:

<div style="position: fixed; top:0px; left:0px; z-index: -1; background: url(http://adserver.url/www/delivery/avw.php?zoneid=ZONEID&amp;cb=RANDOM_NUMBER&amp;n=NID) center center no-repeat; width: 100%; height:100%;">
  <a href='http://adserver.url/www/delivery/ck.php?n=NID&amp;cb=RANDOM_NUMBER' target='_blank' style="display: block; width: 100%; height: 100%;"></a>
</div>

You create new zone with custom size: * x *, so you can upload your background banner. Link banners to this zone. Check zone id in code up. You can have multiple banners displayed as background image.

 

 

It works on chrome but not on firefox or safari, do you know why?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.




×
×
  • Create New...