How to use articles attached images as background of a div I'm doing my first site on Drupal 8 and I have a problem. I would like you to help me.

In fact I'm trying to get the articles attached images as a background for a div created in the page templates. 

I wrote this code in my theme.file

function THEME_preprocess_page(&amp;$variables, $hook) {

// Set articles attached img like background
$node = Drupal::request()-&gt;attributes-&gt;get('node');
if($node){
    if ($node-&gt;bundle() == "article") { // Content type check
        $image = file_create_url($node-&gt;field_image-&gt;entity-&gt;getFileUri()); // Creating file path from uri
        $variables['article'] = true; // Setting value true for current node is articles.
        $variables['background_img'] = $image;
    }
  }
}


and I try to get the image back with the following code in the field--node--field-image--article.html.twig template

&lt;div class="img-ban" style="background: url({{ my_image }});"&gt;&lt;/div&gt;


but it doesn't work.

Can someone tell me what's wrong with this code? I would really appreciate it. Thank you.
Contrib module

What you are describing can be done easily with a contrib module. You could try background_image, bg_image_formatter, bg_img_field perhaps there are others.

Use image in node.html.twig or variant

If you MUST DO IT WITH CUSTOM CODE and you want my_image in node.html.twig or node--article.html.twig you need to prepare it in hook_preprocess_node 

function THEMENAME_preprocess_node(&amp;$variables) {
    $node = $variables["node"];
    if ($node-&gt;hasField('field_image')) {
      $variables["my_image"] = file_create_url($node-&gt;field_image-&gt;entity-&gt;getFileUri());
      // can set more variables
    }
}


Use image in page.html.twig

If you want to include it in a div inside your page.html.twig you should use hook_preprocess_page and note that $node has to be extracted from the ROUTE

function THEMENAME_preprocess_page(&amp;$variables) {
  // get the current node
  $node = \Drupal::routeMatch()-&gt;getParameter('node');
  if ($node instanceof \Drupal\node\NodeInterface) {
    if ($node-&gt;bundle() == "article" &amp;&amp; $node-&gt;hasField('field_image')) {
      $variables["my_image"] = file_create_url($node-&gt;field_image-&gt;entity-&gt;getFileUri());
      // can set more variables
    }
  }
}


Use image in field.html.twig or variant

I can't see the use case but if you want to use it in field.html.twig or a variant such as field--node--field-image--article.html.twig you can access it directly 

{% set my_image = file_url(element['#object'].field_image.0.entity.uri.value) %}


or can set my_image using a hook_preprocess_field 

function THEMENAME_preprocess_field(&amp;$variables) {
  if($variables["element"]["#field_name"] == "field_image"){
    // get parent node
    $node = $variables['element']['#object'];
    if ($node-&gt;bundle() == "article" &amp;&amp; $node-&gt;hasField('field_image')) {
      $variables["my_image"] = file_create_url($node-&gt;field_image-&gt;entity-&gt;getFileUri());
    }
}