4

Im trying to put a background-image url of an lower div and add them to an higher div. The problem is, there are many lower divs with background-images and all of them has the same classname. Overall Im trying to build a parallax theme with drupal 7. The vision is to stream all of my news, put the background-image on 100vh, put the content in the middle in a white box and let them parallax scroll. I am working with views. I have one view which displays all news with fields: Title, Image, Body. The image-field is an background-image field, so the div where its normal displayed got the original-image url as background-image-url.

I just can't put the url of .bg-holder into .section.jumbotron. Or is there any other solution?

<div class="section jumbotron">
    <div class="views-field views-field-title">
        <h1 class="field-content"><a href="/drupal/node/4">HEADLINE</a></h1>
    </div>
    <div class="views-field views-field-field-image">
        <div class="field-content">
            <div class="bg-holder" style="background-image: url(http://localhost/drupal/sites/default/files/styles/large/public/field/image/wallhaven-157066.jpg?itok=2BHBQSVa); background-attachment: scroll; background-size: 1903px;"></div>
        </div>
    </div>
    <div class="views-field views-field-body">
        <p class="field-content">LOREM</p>
    </div>
</div>

Jfiddle of my Body: http://jsfiddle.net/anLL1uop/2/

zanvidmar
  • 361
  • 4
  • 13
Maximilian Dahl
  • 105
  • 9
  • 1
    Edit the View and add unique ID:s to the views-fields by using the functionality to rewrite the content. This id could be taken from file id or node id. When done it should be much easier to target specific HTML elements. – Niklas Brunberg Jun 05 '15 at 14:07

1 Answers1

0

I'm not sure I 100% understand your question, but to change the background of 'jumborton', to that of a specific bg-holder, I would give each one a unique ID, so they can all have the same style (since they are the same class), but the ID lets you tell jQuery which background image you want. I would also set the background-image for each one in the css file, as opposed to doing

<div style="background-image: url(...);"

Here is a jsfiddle that shows you what I mean. It has the jQuery needed to change the background of the jumbotron to that of the clicked div, using its id. https://jsfiddle.net/mahmudzero/anLL1uop/23/

Mahmud Ahmad
  • 171
  • 3
  • 18