Copied to clipboard

Flag this post as spam?

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


  • Richard Terris 273 posts 715 karma points
    Sep 18, 2010 @ 18:34
    Richard Terris
    0

    background-image css

    Hi all

    I noticed that this problem has been raised and in the past and apparently fixed, but none of the fixes work for me,

    The issue is that I have a background image "umbraco/images/header2.png" - I created the images folder because I don't want this in the editable media folder.

    On top of this sits a logo "umbraco/images/logo.png"

    The background image is reference in the css file and the logo is referenced in the masterpage.

    Basically, the logo is loading fine, but the background image is not.

    Within the master page, I have <img src="images/logo.png" height="100" />

    In the css I have background-imageurl('/images/header2.png'no-repeat;

    I have tried variations of the path

    ('images/header2.png'  , 'umbraco/images/header2.png') etc

    When i enter localhost/umbraco/images/header2.png the image loads fine by itself.

    Being new to Umbraco, I'm sure that it is something I have done or not done.

    Interestingy, I did at one point think it didn't like .png files so I created

    a jpeg version and loaded it into the media folder and it still won't load from

    there... Can anyone help?

     

    Thanks

  • jc 64 posts 101 karma points
    Sep 18, 2010 @ 19:33
    jc
    0

    The background-image property will only accept the value of the image. If you combine the background-repeat setting with it, it will fail. Try something like this:

    background: url(/images/header2.png) left top no-repeat;

    If the IMG isn't loading, you may want to set an absolute path to it's source.

  • Richard Terris 273 posts 715 karma points
    Sep 18, 2010 @ 23:23
    Richard Terris
    0

    Hi Guys

    I'm sorry, I should have been clearer earlier - I had tried all variations of path names, with absolute referencing, with and without the quote marks.

    The thing that has fixed it is the removal of the repeat attribute.

    So the final line that works is   background-imageurl(/umbraco/images/header2.png)

    Thanks to you all for taking the time to look at this for me - I appreciate it!

    R

  • Kim Andersen 1447 posts 2196 karma points MVP
    Sep 19, 2010 @ 10:13
    Kim Andersen
    0

    Hi Richard.

    Like jc also mentioned, you can easily have the repeat setting combined with your background image in one line of CSS.

    Just write this:

    background: url(/umbraco/images/header2.png) no-repeat;

    It's easier this way if you are going to use some different settings to your background anyway. Means that the following lines:

    background-color: #cccccc;
    background-image: url(/umbraco/images/header2.png);
    background-repeat: no-repeat;
    etc...

    can be written on just one line like this.

    background: #cccccc url(/umbraco/images/header2.png) no-repeat;

    /Kim A

  • Maritza 29 posts 49 karma points
    Aug 29, 2012 @ 02:12
    Maritza
    0

    I need to link

     url(/umbraco/images/header2.png)to a page

    I have a bannner as a background I need to link the image to a page

    any one?
  • Fuji Kusaka 2203 posts 4220 karma points
    Aug 29, 2012 @ 07:09
    Fuji Kusaka
    0

    Hi Maritza,

    You can add a property in your document Type with Type "Upload" eg."backgroundImg" and just add it to your template

    background: url('<umbraco:item field="backgroundImg" runat="server"/>') 0px 0px no-repeat;
  • Maritza 29 posts 49 karma points
    Aug 29, 2012 @ 14:41
    Maritza
    0

    Fuji, thank you for your reply

    I have an image on the main page - the image is on a div as a background image I need to link that image to a page on the site.

    the css has the specs of the image .  I have been told that can't be done

    this is the CSS portion:

    #nav-area ul {
     position: absolute;
     z-index: 1;
     right: 1px;
     top: 25px;
     background: url(../../elements/skin/nav-bg.jpg) 193px 0 no-repeat; (I need to link this image to a page on the site)
     width: 928px;
     height: 220px;
     padding: 9px 0 6px 0;

     

    How can I do that?

    thank you in advance :)

     

  • Maritza 29 posts 49 karma points
    Aug 30, 2012 @ 17:09
    Maritza
    0

    Please help

     

    Comment with ID: 125396

    Maritza posted this reply 50 minutes ago

    Fuji, thank you for your reply

    I have an image on the main page - the image is on a div as a background image I need to link that image to a page on the site.

    the css has the specs of the image . I have been told that can't be done

    this is the CSS portion:

    #nav-area ul {
    position: absolute;
    z-index: 1;
    right: 1px;
    top: 25px;
    background: url(../../elements/skin/nav-bg.jpg) 193px 0 no-repeat; (I need to link this image to a page on the site)
    width: 928px;
    height: 220px;
    padding: 9px 0 6px 0;

     

    How can I do that?

    thank you in advance :)

  • jc 64 posts 101 karma points
    Aug 30, 2012 @ 19:30
    jc
    0

    If you need an element to load another page on click, you should be using an anchor instead. If you absolutely need to have this unordered list serve as an anchor, then you can add something like this to your JavaScript (requires jQuery):

    $(function(){

    $("#nav-area ul").click(function(){

    window.location = "http://our.umbraco.org";

    });

    });

     

    or you can add an onclick handler to the element: 

    onclick="window.location = 'http://our.umbraco.org'"

  • Maritza 29 posts 49 karma points
    Sep 03, 2012 @ 02:54
    Maritza
    0

    Hi JC thank you, it work

Please Sign in or register to post replies

Write your reply to:

Draft