CSS Background repeat issue

问题

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.

回答1:

You are missing a semi-colon at the end of the background-image property and hence, the next property fails i.e background-repeat

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

回答2:

Try this: This happens because of float property. So I added clear div. you can use this as a trick.

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

来源：https://stackoverflow.com/questions/16393190/css-background-repeat-issue

标签

css

background

repeat