Loading css style present in DOM of another node

Question

I am using the module Simple Background Image Formatter to convert an image into a div background image. It has two options - one to put as an inline style of a div or to choose a CSS selector which it styles with a background image in the DOM. I cannot use the inline style method in views so that is ruled out. Now as per the CSS selector method, it adds a style directly on the page with the 'selectedclass_id'. I can choose the selectedclass but not the id (appears to be randomly added).

However, since my requirement is through views, it somehow (although with wierd settings) automatically prints the class and adds the id, however, the image for other nodes is not loaded in this node as its html style in not loaded in the current page. That is, the image of every page is converted into a selectedclass_id (background-image:...) and placed in the html of that page but the selectedclass_id of the other nodes which are part of the view in this page are not loaded here with their respective values. Therefore, these images are not being displayed in the view.

Is there a solution here? I want the page to load the css selectors for the nodes which are shown in the view (of the same content type) so that the code for each of the view fields is where the id will be different for each of the nodes. The current page should have the values of all such nodes in the view as it does with regard the value of the current page. Presently, only the selectedclass_id of the current page is being loaded in the head html style.

An alternative for the module is Background Images Formatter but this is dependent on bg_image which does not have a Drupal 8 version and doesn't work without it.

Answer 1

I have a related content section on my page through views in which i want one field to be a div with a background-image.

Ok, then you can use Image URL Formatter. Which will output your image as a url instead of the actual image.

Then add the image field, which contains the image you want to use as background

• Hide it from display.
• Select image url as your formatter

Add a custom field OR Rewrite the result of an existing field and use the image replacement pattern.

ex <img class="[YOUR CLASS]" src="{{ field_image }}">

OR if you create a .html.twig template file for your view, then you can use

<div class="[YOUR CLASS]" style="background-image: url('{{ field_image }}')"></div>

---

Another option

In Style settings you can add a class to your fields.

[

Then with css give it a z-index: 0; and give everything else z-index: 1; and move img around by giving it position: absolute; top: -100px; etc..