[SOLVED][Drupal Views Slideshow] How to create a background slideshow using Views Slideshow?

November 16, 2012 - 14:19

Many Drupal users wanted to know how to create a background slideshow using Views Slideshow. If you are looking for the exact method for creating a background slideshow using Views slideshow in your Drupal site then continue reading.

Here is the solution for creating the background slideshow.

  • Within Views in your Drupal site create a template file for the slideshow image field.
  • Next we have to output the image path in this template file.
  • Take care to display the image in the div too as the slideshow uses the images in the div to determine the size of its display
  • To retrieve the path of the field set a field relationship in Views and the image path should be available as a token.
  • Now the template will be outputting [image_field]
  • Replace this with the background image - background-image:url'[image_field]
  • Next you should override the slideshow CSS (to hide the image in the div)
  • Give it the following style attribute visibility:hidden; width: 100% !important;
  • Next set the slideshow container to 100%.
  • Finally set the background image to be centered.

Hope that helps.

The easiest way to solve a Drupal issue is to hand it to the Drupal experts. We can provide a wide range of Drupal services to help you maintain and manage your Drupal websites. Get in touch with us to know more.

Get Drupal updates straight to your inbox

To prevent automated spam submissions leave this field empty.

Post your comments / questions

but if I need background-image for view container, thanks?