razor problem insert images as a backgroundimages - UI Questions

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Kate 267 posts 610 karma points

Sep 09, 2013 @ 14:40
0

Razor problem: Insert images as a backgroundimages
Hi

I'm a total newbie to razor
Is there anyone who can explain to me how I insert a picture as a background image?
I have used Media Picker (name: billedeAfDestination)
```
var  chosenMedia  =  Model.MediaById("billedeAfDestination");
<p>Here: @Model.chosenMedia </p>

<div id="destinationsmap" class="" style="background:url(@Model.chosenMedia) no-repeat;">xxx</div>
```
I appreciate your help

/Kate
Copy Link
Alex Skrypnyk 6175 posts 24186 karma points MVP 8x admin c-trib

Sep 09, 2013 @ 14:54
0
Hi Kate,

Try this one:
```
<div id="destinationsmap" class="" style="background:url(@Model.chosenMedia.umbracoFile) no-repeat;">xxx</div>
```
Copy Link
Kate 267 posts 610 karma points

Sep 09, 2013 @ 15:09
0
No, it dit not work

I think it is wrong in this line:
```
var  chosenMedia  =  Model.MediaById("billedeAfDestination");
```
Because it does not returne anything when I write:
```
<p>Here:@Model.chosenMedia </p>
```
Copy Link
Alex Skrypnyk 6175 posts 24186 karma points MVP 8x admin c-trib

Sep 09, 2013 @ 15:29

0

Yes, "billedeAfDestination" - isn't ID. "billedeAfDestination" - property name. Try to find Media node ID.

Thanks

Copy Link
Kate 267 posts 610 karma points

Sep 09, 2013 @ 15:38
100
I found this link: http://our.umbraco.org/documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors/Media-Picker

And this worked for me:
```
@if(Model.HasValue("billedeAfDestination")){   
  
  var selectedMedia = @Model.Media("billedeAfDestination");

   <div id="destinationsmap" class="" style="background:url(@selectedMedia.umbracoFile) center top no-repeat;">xxx</div>
}
```
But thanks for your help, it lead me in the right direction
Copy Link
Alex Skrypnyk 6175 posts 24186 karma points MVP 8x admin c-trib

Sep 09, 2013 @ 15:52

1

You are welcome )

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Razor problem: Insert images as a backgroundimages