I'm hoping someone can shed some light on this for me. I have a background image to a container div. It was in it's own div, but I wanted to overlap the h1 tag so I added it to the background instead.....

 

As the title says - it's not showing in FF or IE...not tested any other browsers yet. This is my css code:

 

#main.home {background: transparent url(../images/chocolate_crumbs_rev.jpg) no-repeat 60px right;}

 

It's sat in a div: <div id="main" class="container home"></div>

 

Any help would be much appreciated.

Have you got a link ?

 

or can you post more of your code

It's easier to post a link: link

 

Site isn't finished yet.

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fmissoldppiclaimcompany.co.uk%2F&profile=css21&usermedium=all&warning=1&lang=en

 

I think the shoe pinches there:

56 #main.home Value Error : background 60px and right are incompatible : transparent url(../images/chocolate_crumbs_rev.jpg) no-repeat 60px right transparent url(../images/chocolate_crumbs_rev.jpg) no-repeat 60px right

Stupidly, I hadn't considered throwing it through a validator yet.

 

I need the image on the right with a top margin of 60px. How can I amend this code to be valid?

It's because you need to define the x coordinate and then the y.

 

#main.home {background: transparent url(../images/chocolate_crumbs_rev.jpg) no-repeat 60px right;}

Should be

 

#main.home {background: transparent url(../images/chocolate_crumbs_rev.jpg) no-repeat right 60px;}

Nay worries - I've sorted it. Thanks for pointing out where I was going wrong.

It's because you need to define the x coordinate and then the y.

 

#main.home {background: transparent url(../images/chocolate_crumbs_rev.jpg) no-repeat 60px right;}

Should be

 

#main.home {background: transparent url(../images/chocolate_crumbs_rev.jpg) no-repeat right 60px;}

 

Hi - sorry, I posted before I'd seen your response. I didn't realise it was that way round. I don't use positioning much as I usually just use divs and float them. However, I'm trying to use less divs. Many thanks.

Slight little issue....IE is showing the image higher than FF and Chrome. I recall something squiffy about IE and margins..... Best way to fix?

 

EDIT: in fact, quite a few things are out of position.

would setting the height of the main div to Auto do any good.

 

 

 

 

Do let me know