Full Screen (Page) Background Image Slideshow Plugin

Couple of days ago, we posted about how you can set up Full Page Background Image Slideshow on any type of website. This plugin is specifically developed for the WordPress for the same cause. It has few more features to customize the animation and set up the images. With This WordPress plugin you can add single or multiple backgrounds that spans behind whole website contents. Additionally, you also can

1. Set single background
2. Configure multiple backgrounds to behave as slideshow
3. Randomize Backgrounds for each refresh
4. Set animation duration and delay
5. Add dotted Overlay
6. Set Opacity of Background Images

You can download this plugin from WordPress Plugin Repository.

An Example

An Example

An Example

An Example

An Example

An Example

Settings in Admin Panel

Settings in Admin Panel

Widget on Pages

Widget on Pages

If you do not want added features or want to avoid plugin installation, Please check our related snippet.

64 Responses to Full Screen (Page) Background Image Slideshow Plugin

  1. Andrei Hognogi says:

    Can you trigger the plugin to switch for a certain image using javascript?
    My goal, is to have some kind of gallery thumbnails, and to switch the background images by clicking the thumbnails. Thank you in advance :D

    • Mohsin Rasool says:

      Andrei, plugin uses minimal css and javascript to minimize the page size. Therefore, it uses setInterval function of javascript. It is not impossible to switch to a particular image but you have to write a few line of code. Just to give a start, here is some info

      1. window.fsi_interval is the interval variable to stop and start the slideshow
      2. fsi_slideshow function for the setInterval function
      3. Images can be selected using jQuery select “#fsi-full-bg img” the active image should have ‘fsi_active’ class.

      Hope it will help.
      Please share your code if you could get it working. It will be much appreciated.
      Thanks

      • Andrei Hognogi says:

        Hello,
        I apologize for the late response, but I’ve been assigned to other projects, and only now I’ve been reassigned to the said project only yesterday. I did managed to control the background, but it’s a lot of code, and i’m not sure how to post it here.

        Basically, I’ve made 3 functions, for the next image, prev image, and for the n’th image.
        You can see the code on in the page http://m-auto-vermietung.de/ at lines 190 to 240. You can post it anywhere if you want to, I tried to comment it so it will be easier to understand.

        The function calls are in the custom.js page.

        Thanks a lot for the awesome plugin, and easy readable javascript code . If I ever have the pleasure to meet you, i’ll buy you a drink!.

        Regards!

      • Andrei Hognogi says:

        I want to add up that that code was written in a hurry, and also, i’ve only been working in frontend only for several months, so i have to admit, I’m not sure how variable scope works in javascript. I am sure that i could write much cleaner code, if you think that is necessary (next and prev functions can be made in only a couple of lines of code).

  2. Brian Andrews says:

    I’d like to use this on the home page. Can I set it up so that it only applies to one page?

    thank you

  3. Martin says:

    Hey there,

    Can I just check how to get this plug in started? I’ve installed it but not sure if I need to pop anything in functions php. I don’t need changing backgrounds or anything like that I’m just trying to get a single background image on my site.

    Thanks very much!

    • Mohsin Rasool says:

      Martin, after installing this plugin visit Settings->FullScreen Backgrounds. Set first image and the un-check “Enable Slideshow” tick.

      • Martin Davis says:

        Sure Mohsin, it’s http://www.itsourreligion.co.uk. As you’ll be able to see, I currently just have the single image at the top, and that’s the one I’m trying to stretch out to cover the complete background. Thanks for your help

        • Mohsin Rasool says:

          I see, I assume it is a plugin’s glitch for now. You can fix it by adding following CSS to your theme’s style.css.

          #fsi-full-bg img {opacity:1 !important;}

          The small image your seeing at the top is because of “Appearance->Background” you enabled. Please disable to avoid duplication.

      • Martin Davis says:

        Hi Mohsin,

        That has sorted it out. Thank you so much for your help. As simple a problem as this seemed, I’d spent some time trying to sort it and you were the first to really help me out. Thanks for all the great work you’re doing.

        Martin

  4. Martin says:

    Thanks very much Mohsin. I’ve done all those bits, but when I go to appearance>background, it still just leaves me with a very small image at the top of the screen. I have options to tile it, but none to make that one image stretch to the whole background. Is it that my theme might not support it. I’m using the twenty twelve theme. Any ideas? Thanks again.

    • Mohsin Rasool says:

      This plugins has nothing to do with “Appearance -> Background”. You might be looking at wrong place. Plus, Can you post link to your website?

  5. Andrew says:

    Hello

    tried setting background image through Full Screen Backgrounds to http://plumbermelbourne24hr.com.au/wp-content/uploads/2013/03/waterfalls.jpg

    for the standard 2012 theme, but it doesn’t display:
    http://plumbermelbourne24hr.com.au/

    • Mohsin Rasool says:

      Please redownload and re-activate plugin. Or you can paste following CSS to your theme’s style.css to fix it.

      #fsi-full-bg img {opacity:1 !important;}

      p.s. Above CSS code should not be used when slideshow is enabled.

  6. Andrew says:

    Thank you. Background image appears but is only around the content area, not behind it: http://plumbermelbourne24hr.com.au/

  7. Andrew says:

    Perhaps future versions could have the option of full screen or like it appears above.

  8. Leo says:

    I installed and activated this plugin (WP 3.5.1) but when I click on ‘Upload/Select’ nothing happens. There seems to be no way to get it working. I tried deactivating/reactivating but nothing…
    Please advise, this looks like the perfect plugin for my needs.

    • Mohsin Rasool says:

      Leo, Thanks for pointing out the issue. I just fixed and updated the repository. Please re-download and activate the plugin. You should see WordPress default image management tool to select the images. Thanks!

  9. Alex K says:

    I was reading that you where planning to have an option to have slideshow to be implemented in specific pages. Did you have time to do this already?

    thanks

    • Mohsin Rasool says:

      Not yet, Alex. I am busy in many projects these days. I will give it a shot as soon as I get few hours of free time.

  10. Mario says:

    Gгеetіngs! Vеrу useful advicе in thiѕ рarticular аrticlе!
    ӏt’s the little changes which will make the most significant changes. Many thanks for sharing!

  11. John says:

    This is byfar my favorite plugin I have come by. There is one problem with it though… When viewing the site, the background image makes scrolling on the page really laggy. Is anyone else having this problem? Is there any code I should modify to help reduce the lag?

    Thanks and awesome plugin!

  12. Adam Wald says:

    Hi Mohsin,
    Thanks for this plugin. Is there any way to disable, or “hide” this on the inner pages? We want the background to rotate on the homepage which is working perfectly, but want just a plain black background on the inner pages. Thanks for your help!

  13. Maciek says:

    Hi, i would like to display slides in other container than , for example under my header section. Is it possible to adress your slider in other divs ?

  14. David Hughes says:

    The plug-in looks great. What I want to be able to do is sync the animated background slideshow with a picture caption that will reside in a foeground layer is this possible?

    • Mohsin Rasool says:

      Yes, it is possible with some tricks of CSS and JS. But, this plugin does not support it yet.

  15. Denise Yap says:

    Hiya!

    Thanks for the awesome plugin. I have one question – the image right now isn’t centered – how do I change that?

    Another question – can I make the slideshow exist in a holder below the header, footer and main content holder? As in it doesn’t end up taking over the whole screen, but the dimensions are restricted to a div.

    • Mohsin Rasool says:

      Hey Denise,

      For centering, following CSS may help (I did not test it though)

      #fsi-full-bg img {text-align:center; vertical-align:middle;}

      Secondly, You can not move it in a holder. but, you can have it in background and place the header, footer and main content above it using absolute positioning.

      Thanks

  16. iain says:

    Hi Mohsin,
    I am new to WP, i have recently installed your Full Screen Page Background plugin, to obtain an image behind the content that can be seen through the content, similar to the your screenshots, however not sure what i am doing incorrectly. Do i have to add more code, somewhere, to realise this result. Please bear in mind, i know very little about code or where to add it to, so in your reply, could you educate me accordingly,
    Yours sincerely
    Iain

    • Mohsin Rasool says:

      If you want your content area to be transparent, One of the popular technique is to set a transparent image (having transparency between .6-.9) as background image to your content area.

  17. Alistair says:

    Great plugin just what I needed, although when you re-size window the image moves up as it is obviously being placed from the bottom of the screen is there a way that this can be reversed so the image stays at the top of the screen

  18. Vlad says:

    Mohsin,
    if you could point me in the right direction I might be able to help you a bit. I also want to know how to enable the plugin for any given page (including, but not limited to home page), so if you can suggest where to start I might be able to hack my way around it and post the solution for everyone.

    How does the plug in hook up to be active only on posts/pages/category/tag pages?

    • Mohsin Rasool says:

      Vlad,

      Plugin only support backgrounds at two levels in Settings and in Pages. The background images selected in Settings can be configured to be displayed on every post/category/tag/frontpage whatever selected. Background images set on Pages overrides the images set in Settings. Hope it makes sense to you.

  19. Vlad says:

    Sorry, forgot one more thing – I’d like to change transition effect too ( I want slide in from the right or left). Where should I start?

    • Mohsin Rasool says:

      Plugin does not support any other animation except the default one. Animation is implemented through Javascript’s Interval and jQuery’s animate method. You can disable animate and set up your own by copying the fsi_slideshow function from inc/scripts.php file.

  20. Eefje says:

    Set single or multiple images for individual pages.

    How do I do the above?

    Thanks!!

    • Mohsin Rasool says:

      Once you enable the plugin, you will see a new metabox in page editing screen where you can single or multiple background images for that page.

  21. Kerryanne says:

    It doesn’t display on archive pages and there is no option to tick for this. How can I make it display?

    • Mohsin Rasool says:

      Please re-download and install plugin. You should see archive option along with other options in settings page.

  22. I love this plugin. Are there plans to create a version where you can specify an image or set for a given page or post?

    • Mohsin Rasool says:

      You can already do it for pages atleast. Please look for “Full Screen Background Image” meta box on page editing screen. Similar to this picture (last picture in above article).
      Thanks

  23. Al says:

    Hi, I installed this plugin on my site but the images that are larger than the screen do not resize in Chrome. In all other browsers they are resizing fine. What can be the issue here? My site URL: http://bit.ly/158h4CY

    Thanks

  24. Gino says:

    Very nice plugin! Got it working in no time.

    But I can’t center the background image. The CSS from the post above didn’t work either.
    Also, is it possible to make the bg img scroll with the rest of the page?

    Thank you very much!

    • Mohsin Rasool says:

      Please check other non-plugin CSS is not interfering. This would be the only cause.
      Secondly, we can not scroll background image with this plugin. If you found a work around please share with us. Thanks

  25. Hubert says:

    Hello,

    Installed your plugin. Image is currently displaying top left corner of the browser. Any tips? Thanks.

    • Mohsin Rasool says:

      Hi,

      I guess, other CSS is conflicting with plugin’s CSS. You can try following css though.

      #fsi-full-bg {text-align: center !important;width:100% !important; height:100% !important;}

      Thanks

  26. Great plugin. 2 questions

    1 – Is there a way to set the background images to use 100% height & 100% width of user screen? So no matter what the user’s monitor size and screen resolution, the background image fills it, with margin:0 all around ?

    2 – How can I have more than 10 images in a slideshow?

    Thanks

    • Mohsin Rasool says:

      1. Due to wide variety of screen resolutions and any dimension of background image, plugin make it span across whole width and height as best as possible. I must accept that there are cases when it would fail. For example, if you have set up a portrait style image with 1000px width and you load the website on a widescreen with width 1200px or more. You will notice background image is horizontally centered covering the height of the screen. For best results, use a landscape image of least dimension of 1800×1400.

      2. More than 10 images, I will never recommend more than 7 images as it slows down your website load time. If you still want more than 10 images you have to change the code in plugin.

      Thanks

  27. Eric says:

    Hi like the plugin but is there a future possibility to have more or unlimeted photos in the plugin as background…?
    Thanks

    • Mohsin Rasool says:

      Please find and change the number in file full-screen-background-image-slideshow.php line number 24.

      define('FSI_IMAGES_ALLOWED', 10);

      Thanks

  28. Martine says:

    Hello, please check http://www.gevoelvoorgevoel.nl/wp

    When opening the site, the background is completely black for a couple of seconds. I would like to start the slider immediately. Is this possible and if so, how can I do this?

    Thanks for your answer!

    Martine

    • Mohsin Rasool says:

      Hello Martine,

      Your images are too heavy, Please optimize your images keeping same dimensions. Currently, they are over 1MB each, I believe you can optimize it to less than 500KB.

      Good Luck!

  29. Johannes says:

    the alignment of the background image is not working correct.
    when i “reload” the page it is aligned perfect.
    when i click on a menu item is aligned left!

    i´m using the latest Enfold Theme for wordpress, is it possible that there is a conflict?

    see the site here: http://d15924.ispservices.at/wordpress/

    the image for example on “home” should be horizontally centered.
    i solved to align it vertically at the top.

    can anyone help me?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>