Just a note on the media type you created...if it's just an image there's no reason to make a custom media type for it? You should be able to just upload it as images in a folder you could name "Background images".
Then it's simply just a matter of creating a macro were you get the image and wrap it in the inline style attribute and place the macro in the element.
So in your macro the code could look something like this - Assuming you're using Strongly typed.
@{
if(Model.Content.HasValue("mainImage")){
var mediaItem = Umbraco.TypedMedia(Model.Content.GetPropertyValue("mainImage"));
style="background: url(@mediaItem.GetPropertyValue("umbracoFile")) no-repeat"
}
}
Then you should be able to call the macro like this <body <umbraco:Macro Alias="YourMacroAlias" runat="server"></umbraco:Macro>> - I know it looks a bit ugly (ok, very ugly) but it should work.
Thanks for this and I think this is definitely on the path of what I'm after however, it didn't work. The alias of my media type is "bodyBackgroundImage" and this is stored within a generic umbraco folder within "Media". I changed "image" to look for "bodyBackgroundImage" and unfortunately nothing is showing.
Umbraco 7: Select Body Background Image
Hi Guys,
I'm wanting to be able to manage the body background image used for my pages.
Within my "Master" Doctype I have created a tab called "Media" ( to keep it tidy ) and a generic property which is using a Media Picker.
I've created a custom media type caleed "Body Background Image" which the user can create as many as the like as a child of the "Folder" media type.
Using Razor, how can I append the image to render as a CSS background image?
A static trick I am using at the moment is setting the "node name" on the body as a class using:
Ideally, I want to replace this with a content manageable solution.
I have tried something like this and my page bombed:
var bodyImage = Umbraco.TypedMedia(Model.Content.GetPropertyValue("bodyBackgroundImage"));<body style="background-image: url(@bodyImage.GetPropertyValue("umbracoFile"));">
Basically, you can add style attr to your body tag:
Hope this helps.
Oleg
Hi Jordy
Just a note on the media type you created...if it's just an image there's no reason to make a custom media type for it? You should be able to just upload it as images in a folder you could name "Background images".
However in order to be able to render the images as background images I think you should be able to use one of the examples provided here http://our.umbraco.org/documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors/Media-Picker and if you're using the image cropper you can see some examples here http://our.umbraco.org/documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors-v7/Image-Cropper
Then it's simply just a matter of creating a macro were you get the image and wrap it in the inline style attribute and place the macro in the element.
So in your macro the code could look something like this - Assuming you're using Strongly typed.
Then you should be able to call the macro like this
<body <umbraco:Macro Alias="YourMacroAlias" runat="server"></umbraco:Macro>>- I know it looks a bit ugly (ok, very ugly) but it should work.Hope this makes any sense to you.
/Jan
Too slow - And Olegs way is even simpler than my proposal :D
/Jan
Hi Oleg,
Thanks for this and I think this is definitely on the path of what I'm after however, it didn't work. The alias of my media type is "bodyBackgroundImage" and this is stored within a generic umbraco folder within "Media". I changed "image" to look for "bodyBackgroundImage" and unfortunately nothing is showing.
Thanks Jan - I agree re Olegs post but thank you for your help! I haven't upgraded my Umbraco to the image cropper version just yet!
is working on a reply...