How to use entity field as div background image in Views Slideshow?

Question

I have a "background image" field for a particular entity type. I want to be able to upload an image there, and have that image be displayed as a background image in a div created by a View. An example use case would be a Views slideshow where that background image would be the background image of the slide being viewed, and the entity title and any other chosen fields would be laid on top of that.

One thought I had was to rewrite the output of one of the slideshow fields but I'm not sure how I can rewrite the image into a "background image" position.

Is this possible? Any ideas on how to accomplish this?

Thanks!

Answer 1

This seems more like a css/html question but here goes:

You can theme your view so it outputs each slide as follows:

<div class='container'>
    <div class='background'><img src='/img/url/here.jpg' /></div>
    <div class='foreground'>Overlay copy</div>
</div>

With your css as follows:

.container {
    position: relative; /* this is required to keep all absolutely positioned child elements contained */
    overflow: hidden;
    height: 100px;
    width: 1200px;
}

.background {
    position: absolute;
    left: -200px;
    top: 0;
    height: 100px;
    width: 1200px;
    z-index: 1;
}

.foreground {
    position: absolute;
    left: 50px;
    top: 50px;
    height: 50px;
    width: 300px;
    z-index: 2;
}

This will position the background div at 0,0 (relative to container) and position the foreground div in front of the background.

Answer 2

Make sure to have a look at the Background Images Formatter module. It allows you to define a background-image (and size) for any given CSS-selector, as specified in your view (using an image field).

This actually takes care of the popular demand of using specific background images in views (and avoiding the inline-style method, which is impossible in Views)