Drupal views slideshow image as css style background

Thought I'd document this as I will probably do this in future developments.

I wanted a views slideshow, with the images appearing full screen with text ontop. It appears simple at first but actually required more digging.

Backstretch does not work with views slideshow, as it applies the image background to elements not within the slideshow.

I found a slightly helpful article which suggested a fix, but later found the forum from where more helpful information was taken.

to sum it up, you need views to output the url of the image for the field, and then use a views template override to get this url and 'render' it inside a html element as the background-image style.

To do this:

1. Get views to output the url of the image
1. in the views view, add a Relationship
1. this needs to be a 'File Usage: file'
2. next add a field '(file) File Path
1. in this field, tick the box titled:
1. Display download path instead of file storage URI
2. Now to render this URL inside a HTML element you need a template override
1. In views veiw, go to 'Other' > 'Theme' > 'Information'
1. find the template override for the field
2. create a new file with that exact name and place it in your theme
2. inside this file paste this:
1. <div class="mainImage" style="background-image:url('&lt;?php print $output;?&gt;');">&lt;!--<img src="&lt;?php print $output;?&gt;"style="visibility:hidden; "></img>--&gt;</div>
3. Done

You can now style this .mainImage div as:

.mainImage {

position: fixed;

height: 100%;

width: 100%;

top: 0px;

left: 0px;

z-index: -2000;

background: no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

sorted.

It now changes with the views slideshow.