-
1. Re: background image help
osgood_ Mar 6, 2012 5:14 AM (in response to NJP87)1 person found this helpfulNJP87 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">
-
2. Re: background image help
NJP87 Mar 6, 2012 5:14 AM (in response to osgood_)Thanks osgood but it didn't work, tried both
-
3. Re: background image help
osgood_ Mar 6, 2012 5:15 AM (in response to NJP87)1 person found this helpfulNJP87 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.
-
4. Re: background image help
NJP87 Mar 6, 2012 5:54 AM (in response to osgood_)Thanks again osgood, new code looks like this
<body>
<div id="container">
<div id="banner"><img src="Images/Banner.jpg" width="800" height="121" alt="oneshotmas photography" /></div>
<div id="mainimage"></div>
<div id="leftcolumn">Content for id "left column" Goes Here</div>
<div id="centercolumn">Content for id "center column" Goes Here</div>
<div id="rightcolumn">Content for id "right column" Goes Here</div>
</div>
</body>
}
#mainimage {
background-image: url(../Images/background.jpg);
background-repeat: no-repeat;
position: relative;
height: auto;
width: auto;
I did get a quick flash of what i think was the image but nothing now.
-
5. Re: background image help
osgood_ Mar 6, 2012 6:01 AM (in response to NJP87)1 person found this helpfulWhat 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;
}
-
-
7. Re: background image help
osgood_ Mar 6, 2012 6:09 AM (in response to NJP87)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;
}
-
8. Re: background image help
NJP87 Mar 6, 2012 6:31 AM (in response to osgood_)Thank you very much, worked perfectly