This can be done by razor syntax in a Template or a Partial . You will need the Media Picker for the Content section. In the Setting section this is the way to get the Media file with razor syntax:
@{ if (CurrentPage.HasValue("myPicture")){ var dynamicMediaItem = Umbraco.Media(CurrentPage.myPicture); <img class="img-responsive caption__media" src="@dynamicMediaItem.umbracoFile" alt="@dynamicMediaItem.Name" /> } }
As Lars mentions you'll need to render the image using Razor - You can't use @Umbraco.Field since it will only return the image id.
So what you need to do is to fetch the image and write out the path in an internal stylesheet or perhaps inline directly on the element depending on what you need to achieve. Say you need to change the background image on a page then you can write something like this
<html>
<head>
@{
if (CurrentPage.HasValue("myPicture")){
var dynamicMediaItem = Umbraco.Media(CurrentPage.myPicture);
<style>
.my-background{
background: url(@dynamicMediaItem.umbracoFile) no-repeat;
}
</style>
}
}
</head>
<body>
<!-- Your content here -->
</body>
</html>
You're welcome - Not sure if the syntax is right though - It depends how you're dealing with the image etc. but the idea is the same...if that makes sense :)
Change background-image in the CSS
Hi
I am almost sure that this is not possible, but I try to ask anyway. :-)
I need a background-image in the CSS to change when I choose another image in Umbraco backoffice.
I that even possible? Maybe with something like @Umbraco.Field?
Or could it be done in another way?
// René
Hi René
This can be done by razor syntax in a Template or a Partial . You will need the Media Picker for the Content section. In the Setting section this is the way to get the Media file with razor syntax:
@{
if (CurrentPage.HasValue("myPicture")){
var dynamicMediaItem = Umbraco.Media(CurrentPage.myPicture);
<img class="img-responsive caption__media" src="@dynamicMediaItem.umbracoFile" alt="@dynamicMediaItem.Name" /> }
}
// Lars
Hi René
As Lars mentions you'll need to render the image using Razor - You can't use @Umbraco.Field since it will only return the image id.
So what you need to do is to fetch the image and write out the path in an internal stylesheet or perhaps inline directly on the element depending on what you need to achieve. Say you need to change the background image on a page then you can write something like this
Does this work for you?
/Jan
Hi Lars
As far as I can see then your code just show a image whit a alt text. What I need is to change a background-image in the CSS code.
See this CSS code:
.team-photo {background: url(../img/image1.jpg) no-repeat center center fixed;
}
Is it possible to change image1.jpg from the Umbraco backoffice?
// René
Ups...Jan your answer came while I was writing my answer to Lars.
I will try your approach. Thanks!
// René
Hi René
You're welcome - Not sure if the syntax is right though - It depends how you're dealing with the image etc. but the idea is the same...if that makes sense :)
Otherwise let us know.
/Jan
Hi Jan
Your code worked just perfect.
Thanks man....:-)
// René
is working on a reply...