0

Hey guys i cant seem to get my background to not repeat or even get a border to show here is the code

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;
}

Honestly i have tried every which way i could find online but cannot get this to work :/ i dont see any conflicts here but i might be missing something.

this happens in all the browsers i tested

Thanks for your input in advance.

4

2 回答 2

2

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

background-image:url('images/prodblock.jpg');
                                          --^--
于 2013-05-06T06:33:41.880 回答
0

试试这个：这是因为浮动属性。所以我添加了清晰的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>
于 2013-05-06T08:09:44.680 回答