Copied to clipboard

Flag this post as spam?

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


  • Fabio 5 posts 0 karma points
    Jun 29, 2009 @ 11:07
    Fabio
    0

    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!

  • kmacdonell 28 posts 45 karma points
    Jun 29, 2009 @ 11:23
    kmacdonell
    0

    Try:

    background-image: url('/media/49/sfondobaci.jpg');</span>

  • kmacdonell 28 posts 45 karma points
    Jun 29, 2009 @ 11:25
    kmacdonell
    0

    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

  • Fabio 5 posts 0 karma points
    Jun 29, 2009 @ 11:25
    Fabio
    0

    Hi,

    I've already tried it. It doesn't work. Another suggests?

  • kmacdonell 28 posts 45 karma points
    Jun 29, 2009 @ 11:28
    kmacdonell
    0

    Can you post the line that inculdes your css file please?

  • kmacdonell 28 posts 45 karma points
    Jun 29, 2009 @ 11:44
    kmacdonell
    0

    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

  • Fabio 5 posts 0 karma points
    Jun 29, 2009 @ 11:47
    Fabio
    0

    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:

     

     

  • kmacdonell 28 posts 45 karma points
    Jun 29, 2009 @ 11:52
    kmacdonell
    0

    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

  • Fabio 5 posts 0 karma points
    Jun 29, 2009 @ 12:04
    Fabio
    0

    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.

  • Kyle Skrinak 272 posts 327 karma points
    Jun 29, 2009 @ 12:13
    Kyle Skrinak
    0

    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>

  • Fabio 5 posts 0 karma points
    Jun 29, 2009 @ 12:26
    Fabio
    0

    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!

  • Peter Gregory 408 posts 1614 karma points MVP 3x admin c-trib
    Jun 29, 2009 @ 13:44
    Peter Gregory
    0

    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.

     

     

  • Kyle Skrinak 272 posts 327 karma points
    Jun 29, 2009 @ 20:21
    Kyle Skrinak
    0

    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.

  • jefferycxl 35 posts 83 karma points
    Jun 29, 2009 @ 20:54
    jefferycxl
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft