8 Replies Latest reply on Mar 6, 2012 6:31 AM by NJP87

    background image help

    NJP87 Level 1

      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.

       

      HTML

       

      <body>

      <div id="container">

        <div id="banner"><img src="Images/Banner.jpg" width="800" height="121" alt="oneshotmas photography" /></div>

        <div id="main image"></div>

        <div id="left column">Content for  id "left column" Goes Here</div>

        <div id="center column">Content for  id "center column" Goes Here</div>

        <div id="right column">Content for  id "right column" Goes Here</div>

      </div>

       

      </body>

      </html>

       

      CSS

       

      #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

        • 1. Re: background image help
          osgood_ Level 8

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

          1 person found this helpful
          • 2. Re: background image help
            NJP87 Level 1

            Thanks osgood but it didn't work, tried both

            • 3. Re: background image help
              osgood_ Level 8

              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.

              1 person found this helpful
              • 4. Re: background image help
                NJP87 Level 1

                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_ Level 8

                  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;

                  }

                  1 person found this helpful
                  • 6. Re: background image help
                    NJP87 Level 1

                    Nothing

                    • 7. Re: background image help
                      osgood_ Level 8

                      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 Level 1

                        Thank you very much, worked perfectly