html - 背景图像不会重复

标签 html css

问题：我已经尝试了几乎所有在Google上都能找到的选择，但没有运气。

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

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

感谢您的帮助和反馈。

罗伯·康诺利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>

最佳答案

您的问题是height

您必须将此添加到您的CSS

html,body{height:100%}


并将height:100%添加到#backgroundTest


html,body{height:100%}
  
#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;
  height:100%
  /*
    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>

关于html - 背景图像不会重复，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59379978/

上一篇：带有图标对齐的 HTML 内联列表 (Bootstrap 4)

下一篇：css - 卡背隐藏在 chrome 的第一次转换中

相关文章：

javascript - 使用类元素和 Javascript 进行线钳位

java - 如何在保留先前文本的同时输入 HTML JEditorPane？

image - 无法垂直居中图像，但水平工作

html - 侧边栏随机从左跳到右，不记得触摸 CSS

css - flexbox css 居中和布局不能水平工作

javascript - 通过 javascript 选择输入复选框时不触发 ng-show

html - 如何使@keyframes 从当前属性值开始？

javascript - 我当前脚本的巧妙解决方法？

iphone - 在 iphone SDK 中删除特定的 HTML 标签

jquery - CSS 不适用于响应式设计的菜单

©2024 IT工具网  联系我们