Drupal 8 img as backgroundimage - image

Question

I'm making my own drupal 8 theme. This is the first time I use drupal. But I have the following problem: I would like to show the article's image as a background image. In Drupal 7 (I have found) you could do that with the following preprocessor, but how do you achieve this in drupal 8?
function THEME_preprocess_page(&$vars) {
$node = menu_get_object('node');
if (!empty($node) && !empty($node->field_background_image)) {
$image = file_create_url($node->field_background_image[LANGUAGE_NONE][0]['uri']);
drupal_add_css('div#content {background: url(' . $image . ') no-repeat scroll center center / cover #FCFCFC; }', array('type' => 'inline'));
}
}
Thank you

Answer 1

You can get an image field in a background by just doing some tweak with twig.
In a Node-template.html.twig you can get this like.
{% set background_image = node.yourimage_field|striptags|trim %}
OR if the above line does not help then just replace node.yourimage_field|striptags|trim with content.youimage_field|striptags|trim OR you can check the array path to variable by just enabling the module deval and then in your node template file type {{ kint(content) }}
OR {{ kint(node) }}
<div style="background-image:url({{ background_image }});"></div>
In a views-template.html.twig you can do some like this.
{% set background_image = fields.yourimage_field.content|striptags|trim %}
<div style="background-image:url({{ background_image }});"></div>
And That's it.

Answer 2

Adding inline css or js can be achived by adding an '#attached' key to your render array.
$elemnt['#attached']['css_inline'] = // Your css
See https://www.drupal.org/node/2391025
If you use twig for templating you can pass the image url as a variable with th $vars array and use it in in your template.
Anyway, drupal_add_css and drupal_add_js function aren't availablein Drupal 8

Answer 3

There are lots of contributed modules that allow an image field to be rendered as a background image. Using these modules would likely not require any custom code.
My personal favorite is Layout BG. Here is a page with links to several other modules that make it easy to render an image as a background image using a Field Formatter: https://www.drupal.org/docs/contributed-field-formatters/image#s-background-image

Answer 4

You have to write this code in your theme_name.theme file. It is the same as template.php in Drupal 7
function THEME_preprocess_page(&$vars) {
$node = Drupal::request()->attributes->get('node');
if($node){
if ($node->bundle() == "articles")) { // Content type check
$uri = $node->field_background_image->entity->getFileUri();
$image = file_create_url($uri); // Creating file path from uri
$vars['articles'] = true; // Setting value true for current node is articles.
$vars['background_img'] = $image;
}
}
}
Now in your page.twig.html
{% if blog %} // Accessing the blog variable from $vars
<div style="background: url({{ background_img }})"> // Accessing the background_img variable from $vars
// Other content
</div>
{% endif %}
Don't forget to clear cache!
Hope it helps!