TYPO3 / Typoscript: Get properties of a content element - typo3

Question

I have a problem with accessing content in a content object in TYPO3:
Running in TYPO3 8.7.11, I have a page with a Content Element "Image" and I've loaded a single image inside. I want to get an output like this:
<section class="foo" style="background-image:url('fileadmin/foo.png')">
<h2>[image title]</h2>
<p>[image description]</p>
</section>
I got the part with the image title and description working, but I cannot get the image filename for the background image running!
My current Typoscript looks like this:
(edited after Thomas answer, but still not running)
lib.teaser = CONTENT
lib.teaser {
table = tt_content
select.where = colPos = {$teaser_column}
languageField = sys_language_uid
renderObj = COA
renderObj {
# Attempt 1 (regarding the answer of Thomas Löffler)
# this doesn't work and result in an empty URL
#
# 10 {
# references {
# uid.data = uid
# table = tt_content
# fieldName = media
# }
#
# begin = 0
# maxItems = 1
#
# renderObj = IMG_RESOURCE
# renderObj {
# file.import.data = file:current:publicUrl
# }
# stdWrap.wrap = <section class="teaser" style="background-image:url('|');">
# }
# Attempt 2 (regarding the answer of Bernd Wilke πφ)
# this doesn't work and result in an empty URL
10 = FILES
10 {
references {
uid.data = uid
table = tt_content
fieldName = media
}
# a) did you mean that I want to replace
# my renderObj and use a TEXT object instead?
renderObj = TEXT
renderObj {
data = file:current:publicUrl
}
# b) ... or did you mean that I want to provide
# an IMG_RESOURCE and inside of that I want to
# provide a renderObj = TEXT?
#
# renderObj = IMG_RESOURCE
# renderObj {
# listNum = 0
# override.field = media
# renderObj = TEXT
# renderObj.data = file:current:publicUrl
# }
stdWrap.wrap = <section class="teaser" style="background-image:url('|');">
}
20 = TEXT
20.field = header
20.wrap = <h2 class="hide-text">|</h2>
30 = TEXT
30.field = bodytext
30.wrap = <p>|</p>
90 = TEXT
90.value = </section>
}
}
# ...
# edit: added after Thomas answer below
page {
10 = FLUIDTEMPLATE
10 {
format = html
file = {$root}/Templates/{$template}/Layouts/{$main_layout}.html
layoutRootPath = {$root}/Templates/{$template}/Layouts
partialRootPath = {$root}/Templates/{$template}/Partials
variables {
teaser < lib.teaser
# ... some other variables ...
}
# load templates for sections, otherwise Typo3 won't find your sections
file.stdWrap.cObject = CASE
file.stdWrap.cObject {
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout
default = TEXT
default.value = {$root}/Templates/{$template}/Templates/Main.html
}
}
}
Currently resulting in this HTML code:
<section class="teaser" style="background-image:url('');">
<h2 class="hide-text">Get our latest products:</h2>
<p></p>
</section>

Answer 1

You use fluid_styled_content, don't you? Why not using FLUIDTEMPLATE and DataProcessing? There you get all the content data in a nice array and you are able to build your HTML like you want.
See https://usetypo3.com/custom-fsc-element.html for a small start.
Here the documentation for DataProcessing: https://docs.typo3.org/typo3cms/TyposcriptReference/8.7/ContentObjects/Fluidtemplate/#dataprocessing

Answer 2

I can't try it but I would do it like this:
10 = FILES
10 {
references {
uid.data = uid
table = tt_content
fieldName = media
}
begin = 0
maxItems = 1
renderObj = IMG_RESOURCE
renderObj {
file.import.data = file:current:publicUrl
}
stdWrap.wrap = <section class="teaser" style="background-image:url('|');">
}
Example: https://docs.typo3.org/typo3cms/TyposcriptReference/8.7/ContentObjects/Files/Index.html#usage-with-references

Answer 3

you have all the parts together, you just mixed them up.
renderObj = IMG_RESOURCE
renderObj {
file.import.data = file:current:publicUrl
listNum = 0
override.field = media
file.treatIdAsReference = 1
}
IMG_RESOURCE would be the correct object, but you do not build it up correctly:
file.import.data = file:current:publicUrl: where the filename is expected you provide the full path to the image. Wait!? 'the full path to the image'? wasn't it what you want to achive?
renderObj = TEXT
renderObj.data = file:current:publicUrl
If you use 'treatIdAsReference = 1' you need to provide an UId (of a sys_file) and no name
10 = FILES
10 {
references {
// this line should not be neccessary as the current context identifies the record
#uid.data = uid
table = tt_content
fieldName = media
}
// we only can handle one image:
maxItems = 1
// if we want no processing of the image:
renderObj = TEXT
renderObj {
data = file:current:publicUrl
}
// maybe a processing is necessary
// (always deliver smallest image possible)
#renderObj = IMG_RESOURCE
#renderObj {
# file {
# import.data = file:current:uid
# treatIdAsReference = 1
# width = 500c
# height = 200c
# }
#}
stdWrap.wrap = <section class="teaser" style="background-image:url('|');">
}
If this does not work you have a general problem extracting the files from your tt_content elements.
Maybe your fieldname is not media?
Inspect your database:
SELECT fieldname
FROM sys_file_reference
WHERE tablenames = 'tt_content'
AND uid_foreign = <tt_content_record-uid>
I just inspected one installation of mine and found: the fieldname is assets.