Hello there, you are welcome to another awesome tutorial in EWT. In this tutorial, I’m going to show you how you can use different images as your website background. This images will randomize (switch among themselves) each time your page is refreshed.
The essence of this tutorial is to provide the extra look to your website. But like the
EWT Random Ads Server we created last time, this images are clickable and can be linked to a client’s website in form of selling advert space.
The EWT Random Background Image Ads Server uses a simple JQuery command to randomize arrayed images. This images are further styled with CSS to occupy the full width and height of your website.
This feature can be used across several platforms and CMS and can be customized to suit the user’s taste. In the tutorial below, we will try to put together a few words to show you how to integrate this feature in your website.
You can simply add this code just below the opening <body> tag of your website.
Developers
Ads Code
The code above allows you the to add upto 4 images. This figure can be changed by changing the value of Array to the total number of images you intend to rotate e.g. Array(3). Starting from 0, each of your images should have a unique number: images[0], images[1], images[2]. Note: (1) Your numbering must start from zero. (2) While deleting an image line or adding new image line, make sure not to leave unnecessary white space: This will often lead to JavaScript error and your ads might not function properly. (3) Each image line has to be on a separate line.
Ads Style
This style controls the way your ads are rendered on internet browsers. The z-index attribute organize the order of your website elements, so that objects with higher z-index values are placed ahead of those with lower values. If no z-index value is assigned to an object, the object automatically takes 0 as it’s value; hence, z-index: -1; will send your ads behind every objects with z-index = or > -1. If you have specified a different z-index for your body section, you might consider tweaking this section.
Adding Styles
If your CSS is hosted as an individual file, you can copy the code below to your CSS file. Most CMS and platforms allows you to add custom CSS, you can copy this code to your custom CSS.
Otherwise, add the following code anywhere in the <head> tag section of your website.
Did you get the answer you were searching for?
Save hours of searching online or wasting money testing unnecessary plugins, get in touch with me and let's discuss a suitable plan for your project. Best thing about this service is that you are never placed on hold and get to talk to an expereinced Oxwall/Skadate developer.
Get Answers for Free!
Ask a question related to this topic and get immediate answers from other community members in 48hrs or less. Contribute by answering members questions.
Ask Question
Premium Service
Whether it's a custom plugin, theme or dedicated support needed to get you started on your project, get professional 24/7 support tailored to your need.
Get in Touch
Or just leave a comment...
If you are going to use any of this CSS implementation, then it is no longer necessary to include the style in your body section.