background image help

NJP87 wrote:

 

hi all, need a bit of help with a background image, tried everything a can think of (which isn't a lot, this is the first time i have tried doinga webpage) but i can't get my background image to display, i'll put the code i'm using below.

 

 

#container {

    width: 968px;

    background: #FFF;

    margin: 0 auto;

    padding-left: 10px;

    padding-right: 10px;

    overflow: hidden;

}

#main image {

    background-image: url(../Images/background.jpg);

    background-repeat: no-repeat;

    position: relative;

    height: auto;

    width: auto;

 

TIA for any help

 

Nick

Don't use spaces in your css.

Change this:

#main image

to:

#mainImage

or

#main_image

and your 'div id' to:

<div id="mainImage"></div>

or

<div id="main_image"></div>

You also have some more 'div ids' with spaces in them:

<div id="left column">

<div id="center column"

<div id="right column">

NJP87 wrote:

 

Thanks osgood but it didn't work, tried both

Yeah but did you also change the id of your div (see above) I added a bit on after I posted.

What happens if you remove overflow: hidden; form the 'container' css selector?

#container {

    width: 968px;

    background: #FFF;

    margin: 0 auto;

    padding-left: 10px;

    padding-right: 10px;

    overflow: hidden;

}

NJP87 wrote:

 

Nothing

OK OK set some height on the <div>. The <div> needs some height for it to display the image.

#mainimage {

background-image: url(../Images/background.jpg);

background-repeat: no-repeat;

height: 100px;

}