如何重複圖像，但僅水平？

我已經得到了我想要顯示因爲它在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

如何重複圖像，但僅水平？

回答

相關問題