CSS背景重复问题答案

【问题标题】：CSS Background repeat issueCSS背景重复问题
【发布时间】：2013-05-06 16:09:44
【问题描述】：

嘿，伙计们，我似乎无法让我的背景不重复，甚至无法让边框显示这里是代码

HTML:
<div id="content">
  <div class="product">
  <p><strong>Wonderful Guest House</strong></p>
    <p><img src="images/knysna.jpg" width="282" height="171" align="absmiddle" /></p>
    <p>Guest Houses are great alternative accommodation to expensive hotels when         travelling for business or for pleasure. Most guest houses offer &nbsp;the same services as big hotels like cooked meals, airport shuttles, satellite TV, internet connectivity&nbsp; and even conferencing facilities.          </p>
    <p class="style1">>> <a href="#">Visit Website …. </a></p>
  </div>
</div>


CSS:
#content{
width:90%;
margin-top: 60px;
margin-left:5%;
margin-right:5%;
background-color:#CCC;
background-image:url('images/prodblock.jpg')
background-repeat: no-repeat;
}

.product{

width:318px;
display:block;
float: left;
}

老实说，我已经尝试了所有可以在网上找到的方法，但无法让它发挥作用：/我在这里没有看到任何冲突，但我可能会遗漏一些东西。

这发生在我测试的所有浏览器中

提前感谢您的意见。

【问题讨论】：

标签： css background repeat

【解决方案1】：

background-image 属性末尾缺少分号，因此下一个属性失败，即 background-repeat

background-image:url('images/prodblock.jpg');
                                          --^--

【讨论】：

好的，我试过了，然后我的背景图像完全消失了？更新：我将图像标签和重复标签移至产品类并且它有效，现在我的问题是让它拉伸块的高度？有什么想法吗？
@user2353580 从产品中删除 float: left;
@user2353580 使用background-size: 100% 100%;

【解决方案2】：

试试这个：这是因为 float 属性。所以我添加了清晰的div。您可以将其用作技巧。

<html>
<head>
<style type="text/css">
#content{
    width:90%;
    margin-top:60px;
    margin-left:5%;
    margin-right:5%;
    background:#ccc url('https://www.google.com/images/srpr/logo4w.png') no-repeat;
}
.product{
    width:318px;
    display:block;
    float: left;
}
</style> 
</head>
<body>
<div id="content">
  <div class="product">
    <p><strong>Wonderful Guest House</strong></p>
    <p><img src="images/knysna.jpg" width="282" height="171" align="absmiddle" /></p>
    <p>Guest Houses are great alternative accommodation to expensive hotels when travelling for business or for pleasure. Most guest houses offer &nbsp;the same services as big hotels like cooked meals, airport shuttles, satellite TV, internet connectivity&nbsp; and even conferencing facilities.</p>
    <p class="style1"><a href="#">Visit Website</a></p>
  </div>
  <div style="clear:both"></div>
</div>
</body>
</html>

【讨论】：