8 Replies Latest reply: Jul 5, 2013 11:03 AM by mytaxsite.co.uk RSS

    Hep with website please!

    JPW1415 Community Member

      I am design a website after this one online ( http://www.claytonhomes.com ).

      Screen Shot 2013-07-04 at 10.11.49 AM.png

       

      I am having trouble with the background image.

       

      Screen Shot 2013-07-04 at 10.15.48 AM.png

      I am stuck with the extra white space my wrapper ends after both sides of the image so i cant extend it.

       

      HTML

      <div id="wrapper">

        <header id="header">

          <h1><img src="Images/images/logo.png" width="265" height="159"  alt=""/></h1>

          <nav id="mainnav">

            <ul>

              <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','Images/images/hom..png',1)"><img src="Images/images/hom.png" alt="" width="92" height="68" id="home"></a></li>

              <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rentals','','Images/images/rentals..png',1)"><img src="Images/images/rentals.png" alt="" width="92" height="68" id="rentals"></a></li>

              <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('management','','Images/images/man..png',1)"><img src="Images/images/man.png" alt="" width="135" height="68" id="management"></a></li>

              <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('applications','','Images/images/app..png',1)"><img src="Images/images/app.png" alt="" width="125" height="68" id="applications"></a></li>

              <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','Images/images/contact..png',1)"><img src="Images/images/contact.png" alt="" width="114" height="68" id="contact"></a></li>

              <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('about','','Images/images/about..png',1)"><img src="Images/images/about.png" alt="" width="114" height="68" id="about"></a></li>

            </ul>

          </nav>

          <div id="mainimg"></div>

        </header>

      </div>

       

      CSS

      #header h1 img {

                float: left;

                margin-left: 44px;

                margin-top: -11px;

                position: absolute;

      }

      #mainnav {

                width: 733px;

                float: right;

                margin-top: -26px;

      }

      #wrapper {

                width: 1000px;

                margin-left: auto;

                margin-right: auto;

                height: 800px;

      }

      #mainnav ul li {

                float: left;

                list-style-type: none;

                margin-left: 0px;

                margin-top: 0px;

                margin-right: 0px;

                margin-bottom: 0px;

      }

      #mainimg {

                width: 1000%;

                height: 393px;

                float: left;

                margin-top: -4px;

                background-image: url(Images/images/goldengate.png);

                background-repeat: no-repeat;

      }

      #maincontent {

                float: left;

                width: 1000px;

                height: 300px;

      }

        • 1. Re: Hep with website please!
          mytaxsite.co.uk CommunityMVP

          Have you got a link to your page that is showing this problem?  The link you have given is not good enopugh because it is your main site while what people need is to see the page itself.

          • 2. Re: Hep with website please!
            JPW1415 Community Member

            I dont have it linked to a webpage where u can see it I only have it in dreamweaver. I dont know how to upload it to this fourm so u can see it.

            • 3. Re: Hep with website please!
              mytaxsite.co.uk CommunityMVP

              OK I had a look at your code and if the background isn't filling the whole page then it is because you are not repeating it.  Either you can change the CSS to this:

               

              #mainimg {

              width : 1000%;

              height : 393px;

              float : left;

              margin-top : -4px;

              background-image : url(/Images/images/goldengate.png);

              background-repeat : repeat;

              }

               

              Or post your background image here so that we can tell you how it can be made to fill the entire page.  Repeat may not be the ideal method because you don't want the goldengate to be at multiple places.  Anyway without seeing the image it is not possible to advise you.  CSS3's length, percentage, cover, and contain could be used effectively but I better wait for your reply.

              • 4. Re: Hep with website please!
                cdeatherage Community Member

                The css property you may be looking for is:

                 

                body {

                width: 100%;

                background-image: url(PATH TO YOUR IMAGE GOES HERE);

                background-size: cover;

                }

                 

                Chris

                • 5. Re: Hep with website please!
                  JPW1415 Community Member

                  Thanks for the replies those both work but i do relize my image is under 1200px wide so you would see it repeat. I have just made it basic by making it look like this with the image in the wrapper.

                  Screen Shot 2013-07-05 at 8.46.05 AM.png

                  The only problem is that the image cover the logo. Is there anyway to send the image to the back. I inserted the bridge as a DIV with in the header and inserted the picture as a background to the DIV.

                   

                  <div id="mainimg"></div>

                    </header>

                   

                  CSS

                  GOLDEN GATE BRIDGE

                  #mainimg  {

                            float: left;

                            width: 1000px;

                            height: 300px;

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

                            margin-top: -80px;

                  }

                  LOGO

                  #header h1 img {

                            float: left;

                            margin-left: 6px;

                            margin-top: 1pt;

                  }

                  • 6. Re: Hep with website please!
                    cdeatherage Community Member

                    Try adding z-index: 1; to your #mainimg css and then add z-index: 2; to your #header h1 img.

                     

                    Chris

                    • 7. Re: Hep with website please!
                      JPW1415 Community Member

                      Nothing changed

                      • 8. Re: Hep with website please!
                        mytaxsite.co.uk CommunityMVP

                        JPW1415 wrote:

                         

                        Nothing changed

                         

                        If you put the image in your body, would it help?  For example this CSS will fill up the entire body of your page:

                         

                         

                        body {

                            background: url(http://www.jimcoda.com/data/photos/894_1_o1a7285_golden_gate_bridge.jpg) no-repeat center center fixed;

                            -webkit-background-size: cover;

                            -moz-background-size: cover;

                            -o-background-size: cover;

                            background-size: cover;

                        }

                         

                        This is all you need to do and all your other HTML can go in the normal way.

                         

                        However, I still don't know what is actually happening in your code.