I'm trying to insert an image like in the Fanoe download, so that I can put text over it. So in my css I had my background-color:blue; and I simply change the -color to my image url giving background:url('/media/1068/DSC07826.JPG'); I tried to put this in a table and in the body and still nothing. I know the ID of the image is definitely 1068, but after that I'm stuck!
First try removing the final "/" from the path you entered above. It should not be there, which may be the reason you're seeing the 404 message.
If you still get a 404 error after removing the forward slash mentioned then try double checking if there is in fact an image in the /media/1068 folder on the disk?
You can also see if there has been mapped an image to the image node you're trying to pick. If not then you need to try and add the image to the existing image node once again er try to upload it all over and pick it again.
If something fails after this then it might be a good idea to check the /app_data/logs file and see if anything is marked with ERROR or WARNING.
An easy way to make sure that you have the right id of the image that you want to use as your background image in your CSS is by going to the Umbraco Media section, find image, and click on this, and take the properties tab, in there you can find the image id.
I made a screenshot to show where you can find the image id.
Once again thanks so much for your help! The image was in 1068 in the back office and 1001 in WebMAtrix! So I restarted the machine and hey presto! Now I have a HUGE image, just have to size it! This is my CSS:
body{
background:url('/media/1001/DSC07826.JPG');
background-size: full-screen;
background-repeat:no-repeat;
color: green;
}
h1 {
color:black;
font-weight:normal;
}
h2{
color:red;
font-weight:normal;
}
Is there a way to make it full screen where I can see the complete image? It looks like this at the moment, I can't see the street. It's somewhere in the North of France!
Aaaah, well you should make sure to pick the image using a media picker so you can render the path using Razor for instance. Otherwise the image will probably disappear between environments at some point if the value remains hard-coded.
Let us know if you need any further help with styling the text :)
Does it matter if I leave it alone? What can happen if I do? Sorry to be bombarding you with questions! I do have many more!! We have umbraco.tv here, which makes perfect sense until I got to try it out! Then it's brick wall time!
Just found a new video on umbraco.tv under the implementor /fundamentals/ grid layout. I'm going through it now. I thing this might be exactly what I need.
No worries, you're welcome to ask as many questions as you need/want to - We're a bunch of friendly people who likes to help each other out. And as a newcommer your questions add much value since it can give the experienced gang something to think about in regards to whether something needs to be explained more clearly or if something could/should perhaps be changed in the backoffice, the installation process etc.
So keep 'em coming :)
Now to the question itself...
Not exactly what I had in mind. In your example the path is still hardcoded and you would probably get an error message if you tried to execute this.
I'm thinking more something like this
@if (CurrentPage.Image != null && !(CurrentPage.Image is Umbraco.Core.Dynamics.DynamicNull))
{
var m = Umbraco.Media(CurrentPage.Image);
<img src="@m.Url" alt="@m.UrlName" />
}
The above is an example of how to fetch an image, picked on a content page using a media picker, which returns an image id (Like 1001 or whatever the id) using the dynmaic version of Razor. The above is just an example and it would need more work to fit your needs.
This makes it possible to change the background image within a content page from the Umbraco backoffice dynamically.
In your current code it's a hard coded path. Which is fine if it's a static image but if it's a static image at all times, which should not be possible to change within the backoffice then I would keep it on the disk instead since it's then a part of the design, which is a decorative thing and not something that should be managed from within the backoffice unless there is a good reason for it.
I hope this makes sense - But don't worry if it seems confusion at current. You're on the right path and before long I'm sure you'll have an epiphany about it all. Just keep watching those videos and make sure to have a look in the documentation section as well and then keep the questions coming :)
From where I'm sitting you are a great bunch of friendly folk! Its incredible. So thanks for all the support and help. I don't have much experience in programming, a bit of html, javascript, java(Ugh!), c#, python. Bits and pieces! So I'm trying to nail this one down properly and become proficient in it. It's no use being a jack of all trades and master of none!
I think I understand the concept of the media picker idea. It enables the image to be easily changed from the Content area of the back office later on by an admin. I will go through the link you sent me. I've done it before, but repetition is a great way to remember! But first it's time for lunch here, or in my case some birthday cake! It's going to be a fat and happy afternoon!!
Background image like Fanoe
Hi All
I'm trying to insert an image like in the Fanoe download, so that I can put text over it. So in my css I had my background-color:blue; and I simply change the -color to my image url giving background:url('/media/1068/DSC07826.JPG'); I tried to put this in a table and in the body and still nothing. I know the ID of the image is definitely 1068, but after that I'm stuck!
Am I way off here?
Thanks
Tony
Hi Tony
Any chance you could share some of your code?
Can you access the image if you try going to it in your browser directly? Like http://yoursite.com/meda/1068/DSC07826.JPG ?
/Jan
Hi Tony,
It looks to me that you have the right approach to reference your background image from Umbraco Media section in your css file.
What if you just try to access the image in your browser. like this: http://www.yourdomain.com/media/1068/DSC07826.jpg, did you see the image then. If not, then the id of the image may be wrong.
So your css looks like this:
Hope this helps, a step futher.
/Dennis
Hi Jan & Dennis
Spot on I ran http://localhost:51171/media/1068/DSC07826.JPG/ in my browser and got a 404 error. So how do I address my image?
Thanks.
Tony
Hi Tony
First try removing the final "/" from the path you entered above. It should not be there, which may be the reason you're seeing the 404 message.
If you still get a 404 error after removing the forward slash mentioned then try double checking if there is in fact an image in the /media/1068 folder on the disk?
You can also see if there has been mapped an image to the image node you're trying to pick. If not then you need to try and add the image to the existing image node once again er try to upload it all over and pick it again.
If something fails after this then it might be a good idea to check the /app_data/logs file and see if anything is marked with ERROR or WARNING.
Hope this helps.
/Jan
Hi Tony,
An easy way to make sure that you have the right id of the image that you want to use as your background image in your CSS is by going to the Umbraco Media section, find image, and click on this, and take the properties tab, in there you can find the image id.
I made a screenshot to show where you can find the image id.
Hope this helps,
/Dennis
Hi Jan & Dennis
Once again thanks so much for your help! The image was in 1068 in the back office and 1001 in WebMAtrix! So I restarted the machine and hey presto! Now I have a HUGE image, just have to size it! This is my CSS:
body{
background:url('/media/1001/DSC07826.JPG');
background-size: full-screen;
background-repeat:no-repeat;
color: green;
}
h1 {
color:black;
font-weight:normal;
}
h2{
color:red;
font-weight:normal;
}
Is there a way to make it full screen where I can see the complete image? It looks like this at the moment, I can't see the street. It's somewhere in the North of France!
Thanks
Tony
Hi Guys
It's OK! I found it on W3 and changed my code to
body{
background:url('/media/1001/DSC07826.JPG');
background-size: 100% 100%;
background-repeat:no-repeat;
color: green;
}
and now we get
So just have to figure out how to space out the text.
:)
Tony
Hi Tony
Aaaah, well you should make sure to pick the image using a media picker so you can render the path using Razor for instance. Otherwise the image will probably disappear between environments at some point if the value remains hard-coded.
Let us know if you need any further help with styling the text :)
/Jan
Hi Jan
Do you mean have something like
background:url @Url.Media(~'/media/1001/DSC07826.JPG');
Does it matter if I leave it alone? What can happen if I do? Sorry to be bombarding you with questions! I do have many more!! We have umbraco.tv here, which makes perfect sense until I got to try it out! Then it's brick wall time!
Thanks.
Tony
Hi Jan
Just found a new video on umbraco.tv under the implementor /fundamentals/ grid layout. I'm going through it now. I thing this might be exactly what I need.
Thanks
Tony
Hey Tony
No worries, you're welcome to ask as many questions as you need/want to - We're a bunch of friendly people who likes to help each other out. And as a newcommer your questions add much value since it can give the experienced gang something to think about in regards to whether something needs to be explained more clearly or if something could/should perhaps be changed in the backoffice, the installation process etc.
So keep 'em coming :)
Now to the question itself...
Not exactly what I had in mind. In your example the path is still hardcoded and you would probably get an error message if you tried to execute this.
I'm thinking more something like this
The above is an example of how to fetch an image, picked on a content page using a media picker, which returns an image id (Like 1001 or whatever the id) using the dynmaic version of Razor. The above is just an example and it would need more work to fit your needs.
This makes it possible to change the background image within a content page from the Umbraco backoffice dynamically.
In your current code it's a hard coded path. Which is fine if it's a static image but if it's a static image at all times, which should not be possible to change within the backoffice then I would keep it on the disk instead since it's then a part of the design, which is a decorative thing and not something that should be managed from within the backoffice unless there is a good reason for it.
I hope this makes sense - But don't worry if it seems confusion at current. You're on the right path and before long I'm sure you'll have an epiphany about it all. Just keep watching those videos and make sure to have a look in the documentation section as well and then keep the questions coming :)
You should also give this piece a read http://our.umbraco.org/documentation/Using-Umbraco/Creating-Basic-Site/
Cheers, Jan
Hi Jan
From where I'm sitting you are a great bunch of friendly folk! Its incredible. So thanks for all the support and help. I don't have much experience in programming, a bit of html, javascript, java(Ugh!), c#, python. Bits and pieces! So I'm trying to nail this one down properly and become proficient in it. It's no use being a jack of all trades and master of none!
I think I understand the concept of the media picker idea. It enables the image to be easily changed from the Content area of the back office later on by an admin. I will go through the link you sent me. I've done it before, but repetition is a great way to remember! But first it's time for lunch here, or in my case some birthday cake! It's going to be a fat and happy afternoon!!
Thanks.
Tony
is working on a reply...