Hi everyone, I've already posted this topic in the old forum. I'm trying to configure a website entirely made with Umbraco. I'm making the stylesheet using my CSS knowledge and writing it class by class.
I want to put an image into a class background; I uploaded the image into a specified folder I created before, then I put the classic code into my brand new stylesheet:
background-image: url('image');
I save and pulbish, but nothing happens. I'm sure the code of url is correct, because I tried to uploaded it into another page, then I looked at the html code and I've pasted the same route to my css. I think it could be a problem of compiled files, but I don't know how to solve it.
These are my steps:
- I've created a new styleshett clickin' on the controlpanel Settings -> Stylesheets -> (right click) Create
- I've put the code into my brand new css
- I went to Templates -> Runway Master and change the code with the link to my CSS
- I uploaded my Image on the controlpanel Media -> (right click) create new Folder and name it "img" -> uploaded the image.
- on my css, once looked the compiled code into the published pages, I wrote:
I've already tried to put the code: url('/media/img/sfondobaci.jpg'); (because 'img' is the name of the folder I've created and put the image into). But it still doesn't work.
The folder names are the id of the either the Media Node id from the Media Library or if you are using an upload datatype is the id of that datatype property value on that node. These are used to ensure that the folder names are unique and your files are not accidentally overwritten.
An umbraco genius can put a finer point on it, but the /media/#/item.jpg convention allows you the flexibility to move media content into different contexts in the Media panel without impacting the underlying path information. Conversely, the back-end file management is essentially flat, but for a CMS I understand their decision.
It's a paradigm thing; I'm OK with the model YMMV.
Sometimes, I just create a subfolder called "img" within css folder and put all the picutres that related to the style sheet in there. It is hack job, but it is very simple. :P
Background Image
Hi everyone, I've already posted this topic in the old forum.
I'm trying to configure a website entirely made with Umbraco. I'm making the stylesheet using my CSS knowledge and writing it class by class.
I want to put an image into a class background; I uploaded the image into a specified folder I created before, then I put the classic code into my brand new stylesheet:
background-image: url('image');
I save and pulbish, but nothing happens. I'm sure the code of url is correct, because I tried to uploaded it into another page, then I looked at the html code and I've pasted the same route to my css. I think it could be a problem of compiled files, but I don't know how to solve it.
These are my steps:
- I've created a new styleshett clickin' on the controlpanel Settings -> Stylesheets -> (right click) Create
- I've put the code into my brand new css
- I went to Templates -> Runway Master and change the code with the link to my CSS
- I uploaded my Image on the controlpanel Media -> (right click) create new Folder and name it "img" -> uploaded the image.
- on my css, once looked the compiled code into the published pages, I wrote:
background-image: url('../media/49/sfondobaci.jpg');
saved and refreshed on the browser. Nothing happened.
What I have to do to fix that problem? Thank you!
Try:
background-image: url('/media/49/sfondobaci.jpg');</span>
Sorry, editor problems....
Try:
background-image: url('/media/49/sfondobaci.jpg');
This will ensure that whatever level you are calling the stylesheet from you get the image relative to the root of the site.
Cheers,
Kev
Hi,
I've already tried it. It doesn't work. Another suggests?
Can you post the line that inculdes your css file please?
Again, make sure that the stylesheet is included as an absolute reference:
i.e.
<link rel="stylesheet" type="text/css" href="/css/secc-blonde-main.css" />
Also, to make sure that the class style is correctly being applied to the element, add some extra style like:
padding: 50px;
border: 10px solid red;
This will immediately show that the element is picking up the style from the stylesheet.
Cheers,
Kev
Hi,
thank you for the replies!
I'm sure the stylesheet reference is correct, because I've only changed the string of the master page with the css I created.
Before: <link rel="stylesheet" type="text/css" href="/css/runway.css" />
After my editing: <link rel="stylesheet" type="text/css" href="/css/test.css" />
Into the css, this is my code:
Try changing:
background-image: url('media/49/sfondobaci.jpg');
To:
background-image: url('/media/49/sfondobaci.jpg');
The only difference is that the image path starts ith a / which make the path relative to the root of the site.
Cheers,
Kev
Tried.....same result.
I've already tried to put the code: url('/media/img/sfondobaci.jpg'); (because 'img' is the name of the folder I've created and put the image into). But it still doesn't work.
Have you confirmed this link is correct outside of a background-image context, i.e., create a test page and have the following tag
http://<root-path><span style="white-space: pre-wrap;">/css/test.css and you should see the text of your css display ?</span></span></span>
It was so simple that I've never thought about :-D
It was wrong the link.....the right one is "/media/76/sfondobaci.jpg"
Now It works!!!!
Just one last question: why umbraco changes the folder names to numbers? And what can I do to modify or change them?
Thank you all for the patience!
The folder names are the id of the either the Media Node id from the Media Library or if you are using an upload datatype is the id of that datatype property value on that node. These are used to ensure that the folder names are unique and your files are not accidentally overwritten.
An umbraco genius can put a finer point on it, but the /media/#/item.jpg convention allows you the flexibility to move media content into different contexts in the Media panel without impacting the underlying path information. Conversely, the back-end file management is essentially flat, but for a CMS I understand their decision.
It's a paradigm thing; I'm OK with the model YMMV.
Sometimes, I just create a subfolder called "img" within css folder and put all the picutres that related to the style sheet in there. It is hack job, but it is very simple. :P
is working on a reply...