如何重复图像，但仅水平？

我已经得到了我想要显示因为它在x轴的形象，但我不想在y轴的重复属性：如何重复图像，但仅水平？

enter image description here

的，我想因为我想要另一个图像作为背景图像，所以要显示的图像不是背景。这是可能的，如果是的话，怎么样？

我的CSS和HTML是：

BODY {background-image: url(/welcome/static/images/register_top2.png); background-position: center top; repeat-x; no repeat-y } 
#content { 
    width: 700px ; 
    margin: 180 auto; 

} 
#content-container { 
    width: 700px ; 
    margin-left: 180px; 
} 
#image-logo { 
    float: right; 
} 
.has_errors { border: 1px solid #ff0000 } 
.errors {color: #ff0000;} 

     <!DOCTYPE hml> 
         <html> 
           <head> <link rel="stylesheet" href="/welcome/static/css/register.css"/> 

           <STYLE TYPE="text/css"> 



</STYLE> 


             <title>{% trans %}Register new distributor{% endtrans %}</title>  <script type="text/javascript" src="/welcome/static/js/jquery-1.7.1.js"></script> 

     <script type="text/javascript" src="/welcome/static/js/jquery.popupWindow.js"></script> 
           </head> 
           <body> 

<div id="content"><img src="/welcome/static/images/reg-reg3.gif"> 
    <div id="content-container"> 







           <form action="{{action}}" method="post"> 

               <table><tr><td> 

               <label>{% trans %}Soc security number{% endtrans %}</label></td><td>{{ form.soc_sec(size='10', maxlength='10')}}({% trans %}YYMMDDXXXX{% endtrans %})</td></tr> 

               {% if form.soc_sec.errors %}<tr><td></td><td> <div class="red"> 
     <ul class="errors">{% for error in form.soc_sec.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr> 
    {% endif %} 

               <tr><td> 

<label for="start">{% trans %}Your sponsor's ID{% endtrans %}</label></td><td> 

         <input id="log1" {% if form.sponsor_id.errors %}class="has_errors "{% endif %} maxlength="3" name="sponsor_id-log1" size="3" type="text" value="{% if form.sponsor_id.log1.data %}{{form.sponsor_id.log1.data}}{% endif %}" /> 

         <input id="log2" {% if form.sponsor_id.errors %}class="has_errors "{% endif %} maxlength="3" name="sponsor_id-log2" size="3" type="text" value="{% if form.sponsor_id.log2.data %}{{form.sponsor_id.log2.data}}{% endif %}" /> 
         <input id="log3" {% if form.sponsor_id.errors %}class="has_errors "{% endif %} maxlength="3" name="sponsor_id-log3" size="3" type="text" value="{% if form.sponsor_id.log3.data %}{{form.sponsor_id.log3.data}}{% endif %}" /> 
       <input id="log4" {% if form.sponsor_id.errors %}class="has_errors "{% endif %} maxlength="3" name="sponsor_id-log4" size="3" type="text" value="{% if form.sponsor_id.log4.data %}{{form.sponsor_id.log4.data}}{% endif %}" /> 

       (<a class="open_dialog" href="/static/sponsor-id.html">{% trans %}What is a sponsor ID{% endtrans %}?</a>)</td><td></tr> 


{% if form.sponsor_id.log1.errors %} 


<tr><td></td><td> <div class="red"> 
     <ul class="errors">{% for error in form.sponsor_id.log1.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr> 
    {% endif %} 

<tr><td> 
               <label>Email</label></td><td> {{ form.email(size='22', maxlength='60')}} </td></tr> 

{% if form.email.errors %}<tr><td></td><td> <div class="red"> 
     <ul class="errors">{% for error in form.email.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr> 
    {% endif %} 



<tr><td> 
<label>{% trans %}First name{% endtrans %}</label></td><td>{{ form.firstname(size='22', maxlength='60')}}</td></tr> 

{% if form.firstname.errors %}<tr><td></td><td> <div class="red"> 
     <ul class="errors">{% for error in form.firstname.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr> 
    {% endif %} 

<tr><td> 
<label>{% trans %}Last name{% endtrans %}</label></td><td>{{ form.lastname(size='22', maxlength='60')}}</td></tr> 

{% if form.lastname.errors %}<tr><td></td><td> <div class="red"> 
     <ul class="errors">{% for error in form.lastname.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr> 
    {% endif %} 

<tr> 
<td> 
<label>{% trans %}Address{% endtrans %}</label></td><td>{{ form.address(size='22', maxlength='60')}}</td></tr> 

{% if form.address.errors %}<tr><td></td><td> <div class="red"> 
     <ul class="errors">{% for error in form.address.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr> 
    {% endif %} 

<tr><td> 
<label>{% trans %}Zip code{% endtrans %}</label></td><td>{{ form.zipcode(size='22', maxlength='60')}}</td></tr> 

{% if form.zipcode.errors %}<tr><td></td><td> <div class="red"> 
     <ul class="errors">{% for error in form.zipcode.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr> 
    {% endif %} 

<tr><td> 
<label>{% trans %}City{% endtrans %}</label></td><td>{{ form.city(size='22', maxlength='60')}}</td></tr> 

{% if form.city.errors %}<tr><td></td><td> <div class="red"> 
     <ul class="errors">{% for error in form.city.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr> 
    {% endif %} 

<tr><td> 
<label>{% trans %}Phone{% endtrans %}</label></td><td>{{ form.phone(size='22', maxlength='60')}}</td></tr> 

{% if form.phone.errors %}<tr><td></td><td> <div class="red"> 
     <ul class="errors">{% for error in form.phone.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr> 
    {% endif %} 

</table> 


             <button>{% trans %}Next{% endtrans %}</button> 
           </form> </div> 
<img id="image-logo" src="/welcome/static/images/snabbreg002.jpg" /> 

</div><script type="text/javascript"> 
$('.open_dialog').popupWindow({ 
height:500, 
width:700, 
top:325, 
left:400 
}); 
</script> 
</body> 
         </html>

来源

2012-02-27 Niklas Rosencrantz

这样写：

body { 
    background-image: url(/welcome/static/images/register_top2.png); 
    background-position: center top; 
    background-repeat:repeat-x; 
}

或者你可以这样写也：

body { 
     background: url(/welcome/static/images/register_top2.png) center top repeat-x; 
    }

来源

2012-02-27 09:29:07 sandeep

感谢的作品。 – 2012-02-27 12:00:50

background: #FFF url('/welcome/static/images/register_top2.png') fixed repeat-x center top;

来源

2012-02-27 09:31:18

要重复背景图像仅水平，使用css规则

background-repeat: repeat-x;

只有背景可以用CSS来重复，所以如果你希望两个背景，你可以申请一个背景，身体和水平背景，例如在div＃内容。

DEMO

您还可以使用CSS3设置multiple background images同一容器上。语法非常简单，只需使用逗号分隔的属性为背景CSS规则。第一图像是顶部图像：

BODY { 
    background-image: url(banner.jpg), url(background.gif); 
    background-position: center top; 
    background-repeat: repeat-x, repeat; 
}

在上面的例子中，图像“banner.jpg”将水平方向重复，并在顶部，图像“background.gif”将在整个页面被重复在横幅下面。

DEMO

来源

2012-02-27 09:31:19

如何重复图像，但仅水平？

回答

相关问题