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.

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-image: url(/umbraco/images/header2.png); 

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

R

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

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?

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;

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 :)

Please help

Comment with ID: 125396

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'"

Hi JC thank you, it work

is working on a reply...