Question

问题：我尝试了几乎可以在Google上找到的所有选项，但是没有运气。

我尝试过的：背景重复：重复；没有运气。我已经做了很多Google搜索，但没有明确的解决方案。如果这可能是问题，我也试图做一个clearfix。我还玩了页眉边距和填充。我只是想不通。

我已附上我在浏览器中看到的问题的图像。

感谢您的帮助和反馈。

Rob Connolly enter image description here

#wrap {
  margin: 0 auto;
  text-align: center;
  width: 960px;
  background-color: white;
}

#firstName {
  color: white;
  margin: 0 auto;
  background-color: #4aaaa5;
  width: 300px;
  height: 85px;
  float: left;
  font-family: Georgia, 'Times New Roman', Times, serif;
  line-height: 250%;
  text-align: center;
}

#menu {
  color: #777777;
  background-color: white;
  width: 300px;
  height: 85px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  float: right;
  line-height: 125px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

hr {
  clear: both;
  border-bottom-style: solid;
  margin: 0 auto;
  width: 100%;
  align-self: center;
}


/* this is the background Image */

#backgroundTest {
  background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
  background-repeat: repeat;
  padding: 70px;
  /*
    margin: 0 auto;
    padding: 70px;
    height: 100%;
    background-repeat: repeat;
    overflow: hidden;
    */
}

#wrap2 {
  margin: 0px auto;
  width: 960px;
  background-color: white;
  border: #dddddd;
  border-style: solid;
  border-width: .01em;
}

#aboutMeHeading {
  clear: both;
  color: #4aaaa5;
  margin: 15px 0 15px 15px;
}

#grayLine {
  margin: 15px auto;
  color: #dddddd;
  width: 930px;
  border-width: 1px;
  align-self: center;
}

#footerBox {
  margin-top: 50px;
  width: 100%;
  background-color: #666666;
  height: 2.5rem;
  border-top-style: solid;
  border-top-color: #4aaaa5;
  border-top-width: 10px;
  align-self: center;
  bottom: 0;
  position: absolute;
}

#copyright {
  text-align: center;
  color: white;
  overflow: hidden;
}

body {
  margin: 0 auto;
}

#robImage {
  width: 200px;
  height: 200px;
  float: left;
  margin: 0px 15px 0px 15px;
}

p {
  color: #777777;
  text-align: left;
  margin-left: 15px;
  margin-right: 15px;
  word-spacing: 3px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

#footerLine {
  color: #4aaaa5;
}

#cr1 {
  color: white;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Rob Connolly's Portfolio</title>
  <link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/myportfolio/assets/css/style.css">

</head>

<body>

  <!-- this div contains the header-->
  <div id="wrap">

    <header>
      <!-- name in header-->
      <h1 id="firstName">
        Rob Connolly
      </h1>

      <!-- Header-->
      <div id="menu">

        <span>
                About  &nbsp;
            </span>

        <span>
                Portfolio  &nbsp;
            </span>

        <span>
                Contact  &nbsp;
            </span>

      </div>
  </div>
  </header>

  <!-- clear fix cleard float-->
  <hr id="clearfix">

  <!-- background image-->
  <div id="backgroundTest">

    <!-- Wrap2 wraps abouy me section-->
    <div id="wrap2">

      <!-- About Me Heading-->
      <h2 id="aboutMeHeading">
        About Me
      </h2>
      <!-- gray line in about me section-->
      <hr id="grayLine">

      <!-- Image of Rob-->
      <img id="robImage" src="https://lh3.googleusercontent.com/Y0NrDdrtQbttFKexILjcVZ4tPrV55AoKy_jaCB0-lL-QkCfk9FjbYoWXfyLF6gZsz3lwXBSYwjunxjEC0Ti8r-zUe99lezpZXFyL5ReR7Xsf1enfVNYPTg0Fk9R8M3rm-OXNqCDYJgTojq1kl8sADXpR2-24UdZU5hrOMHTpULMyPMcxTu3PIaId-Nfgd4cTzNJ5qtY2YGzFqVL2JjOHukvKah7mWNfcbjEDuQ7iH13Ax4FmolxJcdT7lm6Z25b8gbKoecazzKpMzpwiatuOM8MrHkDG04z9JXlRbrK_BcrsZmzt6b5u79-YKK9siwnWIT_-LlRldygCWsDgPAjoB0EMSsS9D-dbS7nWXJ01SwHaUaLbtu5UgfixRdO6H1FSqJeMv-E1xA4K1MTrUPLLdSZ65_cxzCSzdkKU2Ny4lwWYo5ZvT09kjYLW56XWl7H5BalG0mHzOt4HsKY-XtPRGFC0Nw85ECbpZsEJvBPJDGui8SOS-FDMcHmjdgZNsIGxxG7yaQeK34Cc1MlxnHSzwba5RS-PMbynkuXdTb2Va_QDe_cAFhm-hE9tzgMfn_LWMcnUhrH0bIdq6s4NgwqQ7zz03bBZyXuiKS1zCJRnYobGHUeVJPdXQvR0ZbVl0NyJ_EgI0pm0bhUKYxS9d0ez81LzGcK81yG15SnjuvUjLpK9vSlJB7w0=s960-no"
        alt="rob connolly photo">

      <p>Welcome to my portfolio page. I would like to first thank you for taking the time to learn more about who I am. I love to build and scale companies. I have founded two previous companies, one was recently acquired. I am very fourtante to have had
        the opportunity to learn from my previous failures and successes.
      </p>

      <p>This year I made the decision that I want to be in a position to help other start-ups looking to grow and scale their own companies. I made the decision to go to the University of California, San Diego's, Full-Stack Coding Bootcamp program to sharpen
        my development skills.
      </p>

      <p>If you have any questions about me, start-up questions, or how many games Notre Dame is going to win this season in football, please use the contact form above.
      </p>
    </div>
  </div>
  <!-- Start of footer-->
  <div id="footerBox">
    <!-- Text for footer-->
    <p id="cr1"> &copy; Copyright</p>

  </div>

</body>

</html>

背景图像不会重复

0 个答案: