Skip navigation
Currently Being Moderated

Hep with website please!

Jul 4, 2013 10:22 AM

Tags: #problem #adobe #dreamweaver #css #html5 #cs6

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;

}

 
Replies
  • Currently Being Moderated
    Jul 4, 2013 10:49 AM   in reply to JPW1415

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2013 2:09 PM   in reply to JPW1415

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 5, 2013 4:58 AM   in reply to JPW1415

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 5, 2013 8:57 AM   in reply to JPW1415

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

     

    Chris

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 5, 2013 11:03 AM   in reply to JPW1415

    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.jp g) 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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points