How to get file from managed_filed in drupal 8 generate image style and use as background image for a div

Question

I had created a form filed to upload an image on a themes settings page like this

$form ['ad_tv']['tv_adbackground'] = array(
    '#type'     => 'managed_file',
    '#title'    => t('Hintergrundbild'),
    '#required' => FALSE,
    '#upload_location' => file_default_scheme() . '://theme/backgrounds/',
    '#default_value' => theme_get_setting('tv_adbackground'),
    '#upload_validators' => array(
      'file_validate_extensions' => array('gif png jpg jpeg'),

),

Now I like to know

with preprocess function to use in mytheme.theme to make sure the file gets overwritten, if a new one is uploaded. how to add the path of the uploaded file or its image style to add the path as background image to a div with a css id called advertisement

I hape that this is not to much for one question. I am new to drupal 8. So any help will be welcome-

thank you.

Answer 1

Untested, but you should be able to do this:

$style = Drupal\image\Entity\ImageStyle::load(IMAGESTYLENAME);

$url = $style->buildUrl(theme_get_setting('tv_adbackground'));

$element['background'] = [
  '#prefix' => '<div style="background-image:url(' . $url . ')">',
  '#suffix' => '</div>',
  // Force rendering of this element
  '#markup' => '',
];

You'll need to change IMAGESTYLENAME to the actual image style you want to apply.