2

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!

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.

| improve this answer | |
  • Hmmm, that could work. My only issue with that, though, is that the slideshow background image needs to be the full width of the screen (let's say 1600px wide). If I did it in the way you describe, my website will be 1600px wide since it will be accommodating the full width of that background div, but I need the content area (including the "content" of the slideshow) to be 1200px wide. – hockey2112 Sep 18 '13 at 23:48
  • I updated the answer to use overflow: hidden on the container which would do the trick. – Scott Joudry Sep 18 '13 at 23:56
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)

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.