Search code examples
umbracoumbraco7

Can't add a background image with umbraco inline

I'm trying to add a image from my media picker to my website. It needs to be placede as a inline in my header as a background image. But it won't get on my webpage.

Header code:

<header style="width: 100%; height: 100%; background-image: url('@Umbraco.TypedMedia(Model.Content.GetPropertyValue("backgroundimage"))')"></header>

And yes the Alias is: backgroundimage

How can i make it visual on the website?

Solution

  • Umbraco.TypedMedia(Model.Content.GetPropertyValue("backgroundimage")) will return an IPublishedContent object. You need to render out it's Url property in your in-line code.

    Try this:

    @{
    var backgroundImage = Umbraco.TypedMedia(Model.Content.GetPropertyValue("backgroundimage"))
}
<header style="width: 100%; height: 100%; background-image: url('@backgroundImage.Url')">
</header>

    If you want to validate whether you have a valid image or not (i.e. the user has specified one) you could take it a step further and do this:

    <header 
 style="width: 100%; height: 100%; @(backgroundImage == null ? null : "background-image: url('" + backgroundImage.Url + "')"
>
</header>